为什么要使用axios拦截器？
页面发送http请求，很多情况我们要对请求和其响应进行特定的处理；例如每个请求都附带后端返回的token，在这种情况下，axios为开发者提供了这样一个API（拦截器）。
拦截器分为：
- 请求（request）拦截器
- 响应（response）拦截器。
怎么操作？
request.js的编写(一般是在utils文件夹创建一个request.js)
import axios from "axios";//引入axios
import router from "../router/index";//引入路由
import store from "../store";//如果需要在store内取数据就要引入store
// 配置
const axiosInstance = axios.create({
baseURL: 'http://192.168.0.182:8080', //前部分地址
timeout: 20000 // 请求超时时间（单位ms）
})
// 添加请求拦截器
axiosInstance.interceptors.request.use(config => {
let token = localStorage.getItem("Token");
//当前token值是本地存储，如果放在store内需store.state.token获取token
if (token) {
// 给请求头添加laohu-token
config.headers["Token"] = token;
}
return config;
},
error => {
console.log(error); // for debug
Promise.reject(error);
}
);
// 添加响应拦截器
axiosInstance.interceptors.response.use(response=> {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
}, error => {
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Message({
message: '登录过期，请重新登录',
duration: 1000,
forbidClick: true
});
....
// 其他错误，直接抛出错误提示
default:
Message({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error);
});
//导出
export default axiosInstance;
在项目中调用拦截器
axios封装好之后，调用就很简单了。我们把接口统一写在api文件夹中。（如果你的业务非常复杂，建议把不同模块或组件的请求分开写到不同的文件里，这样方便维护）。
//准备
import $http from "@/utils/request.js";
import qs from "qs"//用来序列化post类型的数据，某些请求会用得到
//发送axios请求
export const 接口名 = (data) => $http.post('前部分地址+后部分地址',qs.stringify(data)).then((data)=>{
return data.data
})
在具体的组件中进行调用
import { 接口名} from '@/api/接口js'
export default {
data() {
return {}
},
created() {
this.getData();
}
methods:{
getData() {
接口名(参数).then(res => {
console.log(res)
//拿到的res进行一番操作或者渲染
})
}
},
}
补充：
关于Vue中，序列化字符串，处理发送请求的参数
使用工具qs来处理参数
步骤：
1、首先先下载：npm i qs
2、然后引入 ：import qs from 'qs'
3、qs主要有两个方法 ：
方法一：将对象序列化，多个对象之间用&拼接（拼接是由底层处理，无需手动操作）
qs.stringify() 转换成查询字符串
let comments = {content: this.inputValue}
let comValue = qs.stringify(comments)
方法二：将序列化的内容拆分成一个个单一的对象
qs.parse() 转换成json对象
let comValue = qs.parse(comments)
