Vue之封装Axios---kalrry
一、简介
1. Axios是什么？
- 官方解释：Axios 是一个基于 promise 实现的 HTTP 库，在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequests。
- 本质原理：axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。
- 个人理解：从后台获取数据进行交互用的
2. 主要特点
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
2. 为什么封装Axios
二、Axios发送请求
1. 发起一个 GET 请求
const axios = require('axios');
// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.then(function () {
// 总是会执行
});
// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// 总是会执行
});
// 支持async/await用法
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
2. 发起一个POST请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
三、封装Axios
1. 安装Axios
npm install axios -S 或者 yarn add axios -S
2. Axios的初步封装
- 首先在项目中新建request.js文件用于对axios进行初步的封装；
//在request.js文件中写入以下代码：
import axios from "axios"
const service = axios.create({
baseURL:'', //服务器地址,一般会按照生产,开发环境进行不同的配置
timeout: 5000 //请求超时前的毫秒数; 如超过规定的毫秒数请求会被终止
})
// 设置请求拦截器 :
service.interceptors.request.use(
(config) => {
// 一般会在这里对请求头进行一些设置 ; 可以根据自己项目的需求进行设置
return config
},
(error) => {
return Promise.reject(error)
}
)
// 设置 响应拦截器 :
service.interceptors.response.use(
// 响应成功
(response) => {
// 请求响应成功设置
},
// 响应失败
(error) => {
// 请求响应失败的设置
return Promise.reject(error)
}
)
export default axios
demo
import axios from 'axios'
import {
Message } from 'element-ui'
import store from '@/store'
import {
hasToken } from '@/utils/auth.js'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 6000
})
service.interceptors.request.use(
(config) => {
if (store.getters.token) {
config.headers.Authorization = store.getters.token
if (hasToken()) {
store.dispatch('user/logout')
return Promise.reject(new Error('token 失效'))
}
}
return config
},
(error) => {
return Promise.reject(error)
}
)
// 设置响应拦截器
service.interceptors.response.use(
// 响应成功
(response) => {
const {
data, message, success } = response.data
if (success) {
return data
} else {
Message({
showClose: true,
message: message,
type: 'error'
})
}
},
// 响应失败
(error) => {
if (
error.response &&
error.response.data &&
error.response.data.code === 401
) {
store.dispatch('user/logout')
}
Message({
showClose: true,
message: error.message,
type: 'error'
})
return Promise.reject(error)
}
)
export default service
3. Axios请求的封装
- 新建文件api.js,引入刚刚封装好的request.js;
import request from '@/utils/request.js'
/**
* 写法一 : 比较具体
*/
export const loginAPI = (data) => {
return request({
url: '接口地址',
method: '请求方式',
data
})
}
/**
* 写法二 : 复用性高一些
*/
export const getAPI = (url, data) => {
return request({
url: url,
method: 'get',
params: data
})
}
export const putAPI = (url, data) => {
return request({
url: url,
method: 'put',
data: data
})
}
export const postAPI = (url, data) => {
return request({
url: url,
method: 'post',
data: data
})
}
4. 使用
// 直接在需要使用的地方导入即可
import {
getAPI, postAPI } from '@/apis/api.js'