目录
- Axios介绍
- Axios安装
- Axios二次封装
1. Axios介绍
什么是 axios?
- Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特性
- 从浏览器中创建 XMLHttpRequests(和原生的Ajax相同都是基于XMLHttpRequest()对象的二次封装)
- 从 node.js 创建 http 请求(可以在Node环境中配合Express()使用实现异步的数据交互)
- 支持 Promise API(Axios是基于Promise()对象进行的二次封装,完美支持Promise()对象的所有Api是让异步的数据交互变得更加简单,方便)
- 拦截请求和响应(提供自定以拦截器可以自行对Axios进行二次封装,满足不同开发者不同情境下的定制化需求)
- 转换请求数据和响应数据(相比fetch()axios最强大的就是自己完成了请求和相应数据之间的转换,大大减少开发者的工作量)
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
2.Axios安装
- 安装
npm install axios --save
- 引入
import Axios from './axios'
- 使用
Vue.prototype.axios = Axios;
(全局注册 在使用时可以使用this.$axios使用) - 建议:在使用过程中建议大家创建一个axios的文件夹如图:
好处: - apiConfig文件中主要用来存放后台接口的地址,可分为研发地址,测试地址,生产地址,易于区分
- index文件中我们可以用来对axios进行二次封装
3.Axios二次封装
这是官网对Axios拦截器的介绍当然是写的非常的泛泛,下面我会给大家详细解读
- 首先在index.js文件中引入
import axios from "axios"
- 1.请求头封装
利用axios.create()方法可以自定义axios的配置,包括延时,相应的参数格式,以及携带请求头的格式
const Axios = axios.create({
timeout: 20000,
responseType: "json",
headers: {
'Content-Type': 'application/json',
}
});
- 2.请求拦截器的封装
请求拦截器的作用是在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。
Axios.interceptors.request.use(
config => {
let userInfo = store.state.permissions.userInfo;//用来获取本地存储的accessToken数据
if (userInfo.accessToken) {
config.headers['Authorization'] = userInfo.accessToken;//设置请求头
}
if (config.mask !== false) {//设置请求等待过程的页面动画,使用ElementUI中的loading动画
loadAll = Loading.service({
lock: true,
text: '加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.4)'
});
}
return config;
},
err => {
return Promise.reject(err);
});
- 3.相应拦截器的封装
响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页
Axios.interceptors.response.use(
response => {
setTimeout(function () {
loadAll.close();
}, 500);
// 返回成功的回调函数
if (response.data.code === 200) {
//操作成功返回数据
return response.data;
}
},
// 返回错误的回调函数
error => {
Message({
showClose: true,
message: '请求失败,请重试',
type: 'error'
});
setTimeout(function () {
loadAll.close();
}, 500);
// 过滤返回的错误码,根据不同的错误码执行不同的函数
if (error.response) {
switch (error.response.status) {
case 401:
store.commit('permissions/removeInfo');//清除用户数据,跳转重新登录页面
break;
case 404:
break;
case 403:
break;
case 500:
break;
default:
break;
}
return Promise.reject(error)
}
}
);