封装axios请求相关配置和拦截器

学习axios的一些记录。。。

安装与引入

安装

npm install axios

引入

import axios from "axios";

1. axios.defaults 默认配置

全局设置默认值：

axios.defaults.timeout = 60 * 1000;

自定义实例默认值：

const service = axios.create({
  baseUrl: "/api",
});
service.defaults.timeout = 60 * 1000;

• timeout 设置请求超时等待时间
• baseURL 设置请求路径
• headers.common['Authorization'] 设置所有请求授权头
• headers.post['Content-Type'] 设置 POST 请求数据格式
• headers.get['Content-Type'] 设置 GET 请求数据格式
• validateStatus 设置请求成功的状态码
• withCredentials 设置跨域请求是否允许携带 cookie 信息

axios.defaults.baseURL = "/api";
axios.defaults.headers.common["Authorization"] = auth_token;
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
axios.defaults.headers.get["Content-Type"] = "application/x-www-form-urlencoded";
axios.defaults.validateStatus = function (status) {
  return status >= 200 && status <= 500;
};
axios.defaults.withCredentials = true;

2.axios.interceptors 拦截器

axios.interceptors.request.use(
  (config) => {
    // 开始进度条
    Nprogress.start();
    // 请求头判断
    config.headers["my-config"] = cilentId;
    // 判断是否需要携带token
    config.headers[tokenHeader] = getToken();
    // 传递数据加密
    if (config.params) config.params = encrypt(JSON.stringfy(config.params));
    if (config.data) config.data = encrypt(JSON.stringfy(config.data));
    return config;
  },
  (error) => {
    return Pormise.reject(error);
  }
);

axios.interceptors.request.use 请求拦截器，可以在请求拦截器进行 开始进度条、添加 cookie、请求头验证、传递数据加密等操作

axios.interceptors.response.use(
	res => {
		// 结束进度条
		NProgress.done();
		// 判断是否重新登录 status==401
		if(res.data.code==401||res.status==401){
			removeToken();
			Logout();
			router.push({path:'login'})
			return Promise.reject(new Error(message))
		}
		// 不同状态码处理
		if(res.data.code!==200||res.status!==200){
			// ......
			return Promise.reject(new Error(message))
		}
		// 解密数据
		res.data = JSON.parse(decrypt(res.data));
		return res;
	},
	error => {
		// 公共错误处理、根据响应码具体处理
		if(error && error.reponse){
			switch (error.response.status){
				case 400:
					error.message='请求错误';
					break;
				case 401:
					error.message='未授权，请重新登录';
					break;
				// ......
			}
		}
		return Promise.reject(error)
	}
)

axios.interceptors.response.use 响应拦截器，可以进行 结束进度条、不同状态码处理、登录重定向、根据状态码反馈错误、解密数据等操作