axios里面可以设置拦截器 ，可以在我们正式请求发送之前做一些事情
拦截器分请求（request）拦截器和响应（response）拦截器
最近在项目开发中，前后端交互时，经常会使用到token
在进行敏感操作之前，每个请求需要携带token，但是token 有有效期，token 失效后需要换取新的token并继续请求。
需求分析
首次请求后台把token返回给前端，前端把这个token可以保存起来， 然后每次请求后端都需要带上这个token 进行鉴权验证
如果我们每次请求都在路径后面加上http://abc.com/list?token=xxxx 这种形式
如果请求特别多的话 每次都在后面写上token=xxx这种太麻烦
这时候就可以用 axios request 拦截器，给每个请求都加 token，这样就可以节省每个请求再一次次的复制粘贴代码。
token 失效问题，当我们token 失效，我们服务端会返回一个特定的错误表示，比如 token invalid，但是我们不能在每个请求之后去做刷新 token 的操作呀，所以这里我们就用 axios response 拦截器，我们统一处理所有请求成功之后响应过来的数据，然后对特殊数据进行处理，其他的正常分发。
具体实现
- 下载安装axios:
npm install axios - 引入（在哪里使用就在哪里引入）
import axios from 'axios' - 封装request.js（位置：utils/request.js）代码如下：
import axios from "axios";
import {Notification, MessageBox, Message} from 'element-ui';
import errorCode from '@/utils/errorCode';
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例 axios.create([config])
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL:
process.env.NODE_ENV === "production" //正式生产环境，程序最终发布后所需要的参数配置
? process.env.VUE_APP_BASE_URI
: process.env.VUE_APP_BASE_API,
// 超时
timeout: 30000
});
// request拦截器
service.interceptors.request.use(
config => {
// 是否需要设置 token
config.headers["token"] =sessionStorage.getItem('toKenValue'); // 让每个请求携带自定义token 请根据实际情况自行修改
return config;
},
error => {
console.log(error);
Promise.reject(error);
}
);
// 响应拦截器
axios.interceptors.response.use(
res => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = errorCode[code] || res.data.message || errorCode['default'];
if (code === 403) {
MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
// 跳转登录页
sessionStorage.removeItem('toKenValue');
router.push(
'/login',
() => {},
e => {}
);
return false;
});
} else if (code === 500) {
Message({
message: msg,
type: 'error',
});
return Promise.reject(new Error(msg));
} else if (code !== 200) {
Notification.error({
title: msg,
});
return Promise.reject('error');
} else {
return res.data;
}
},
error => {
console.log('err' + error);
let {message} = error;
if (message == 'Network Error') {
message = '后端接口连接异常';
} else if (message.includes('timeout')) {
message = '系统接口请求超时';
} else if (message.includes('Request failed with status code')) {
message = '系统接口' + message.substr(message.length - 3) + '异常';
}
Message({
message: message,
type: 'error',
duration: 5 * 1000,
});
return Promise.reject(error);
}
);
export default service;
哪里可以配置axios呢
- axios全局配置
//如果create()里不添加参数的话，在创建这个axios实例的时候，使用的就是全局的配置
//axios.defaults.后边跟的就是axios的那些配置
//一般修改的全局配置，也就下边这两个
axios.defaults.withCredentials = true;
axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
- axios实例配置
//如果设置了全局的配置，但是又想在创建的实例里修改
const service = axios.create({
timeout: 30000
})
- axios请求配置
//如果设置了全局的配置，但是又想在创建的实例里修改
let instance = axios.create();
instance.get('/data.json',{
timeout:5000
})
-这3种配置方法的优先级是 axios请求配置> axios实例配置 > axios全局配置
问：timeout的作用
答：timeout 超时时长 默认是1秒，超时时长的意思是，发起请求的时候，服务端长时间没有返回数据，接口就会报超时401具体的超时时长一般是由后端定义的，比如当前端请求了一个比较大的数据，后端需要进行处理，一旦处理时间过长，比如超过1秒那么后端可能就直接返回401，告诉前端接口超时了，这个时候其实前端也需要做响应的处理
问：axios创建实例作用是啥，为啥要创建一个实例
答：可以不创建一个axios实例，默认会导出实例axios，通常你只需使用这个axios就可以了。
但是有时候你需要创建多个实例，比如你需要访问多个服务地址，而这些服务请求和响应的结构都完全不同，那么你可以通过axios.create创建不同的实例来处理。
比如axios1是用http状态码确定响应是否正常，而axios2是服务器自己定义的状态码，又或者他们请求头不同，支持的content-type不同，那么我可以单独为axios1和axios2写拦截器。
问：关于axios的baseURL是使用相对路径还是绝对路径？
答：前后端都部署在同一台服务器可以用相对路径, 部署在不同服务器用绝对路径。
一般是写相对路径，这样部署前端代码，只要把前端包放在哪个环境下，就直接放，不需要前端再重新修改一个路径再打包了。
request.js:
baseURL:
process.env.NODE_ENV === "production"
? process.env.VUE_APP_BASE_URI
: process.env.VUE_APP_BASE_API,
.env.production:(生产环境)
VUE_APP_BASE_URI = 'http://xxx.com/massgroup-fz'
.env.development:(开发环境--用于本地开发联调)
VUE_APP_BASE_API = '/dev-api'
.env.staging:(测试环境)
VUE_APP_BASE_API = '/massgroup'
