axios的基本配置、请求拦截器和响应拦截器

一：基本介绍

在实际项目中，一般需要对axios进行一次封装，用来统一配置axios的基本配置和请求拦截器、响应拦截器等；

二：基本配置

我们可以通过 axios.create([config]) 来创建一个拥有 axios 通用配置的实例，下面是常用配置项：

import axios from "axios";

const request = axios.create({
	baseURL:"xxx",  // 基本地址，对于非 http 和非 https 开头的请求都会在前面拼接上这个地址
	timeout:20000,  // 超时时间，超过这个时间没有收到服务器的回复就会报错，单位是毫秒
	method:"post",  // 请求方式，默认是get，可以在这里设置默认方式为其他请求方式
	headers:{},     //请求头配置
})
export default request;

这样，我们在其他文件里面引进request就可以使用了，这个只是基本配置，在使用的时候是可以覆盖基本配置的。

三：请求拦截器

请求拦截器，就是在使用该实例发送请求时，可以在这里进行一些设置，通常用来携带token之类的功能；

import axios from "axios";

const request = axios.create({
	baseURL:"xxx",  
	timeout:20000, 
})

// 请求拦截器
request.interceptors.request.use(
	(config)=>{
		if(config.url !== "/sys/login"){   // 判断请求是否是登录接口
			config.headers.token = sessionStorage.getItem("token"); // 如果不是登录接口，就给请求头里面设置token
		}
		return config; // 返回这个配置对象，如果没有返回，这个请求就不会发送出去
	},
	(error)=>{
		return Promise.reject(error);
	}
)
export default request;

使用 request.interceptors.request.use() 函数就可以进行请求拦截器的配置，这个函数接收两个参数，第一个是成功回调函数，一个是失败回调函数,成功的回调函数有一个参数，如下图：

可以通过这些属性进行判断是否继续发送该请求。

四：响应拦截器

响应拦截器，就是收到服务器返回的数据后，可以在这里进行一些设置

import axios from "axios";

const request = axios.create({
	baseURL:"xxx",  
	timeout:20000, 
})

// 响应拦截器
request.interceptors.response.use(
	(res)=>{
		let code = res.data.code  // 获取后端返回的状态码
		if(code===200){           // 成功
			return res.data.data  // 返回里面的数据，在使用这个axios时，获取到的东西就是这里返回的东西
		}else{
			return res.data   
		}
	},
	(error)=>{
		return Promise.reject(error);
	}
)

export default request;

使用 request.interceptors.response.use() 函数可以进行响应拦截器的配置，这个函数也有两个参数，第一个是成功的回调函数，第二个是失败的回调函数，成功回调函数里面有一个参数，这个参数就是从后端返回的数据（注意： 这个数据是经过axios封装了的，所以我们一般直接取里面的data），返回的res如下：

这里我们可以和后端约定状态码，通过状态码进行相应的处理，比如成功就正常返回数据，token失效就跳转登录页面等等；还有需要注意的的是： 后端一般会对错误进行处理，所以发送的请求很少会直接报错（通过catch获取），而是通过状态码（一般是500）告诉你错了，但是这个axios请求时成功了的，只是返回了一个错误的信息，这个信息还是会出现在 .then 里面。

五：总结

下面是完整代码

import axios from "axios";
import router from "路由文件地址"; // 获取路由

const request = axios.create({
	baseURL:"xxx",  
	timeout:20000, 
})

// 请求拦截器
request.interceptors.request.use(
	(config)=>{
		if(config.url !== "/sys/login"){   // 判断请求是否是登录接口
			config.headers.token = sessionStorage.getItem("token"); // 如果不是登录接口，就给请求头里面设置token
		}
		return config; // 返回这个配置对象，如果没有返回，这个请求就不会发送出去
	},
	(error)=>{
		return Promise.reject(error);
	}
)

// 响应拦截器
request.interceptors.response.use(
	(res)=>{
		let code = res.data.code  // 获取后端返回的状态码
		if(code===200){           // 成功
			return res.data.data  // 返回里面的数据，在使用这个axios时，获取到的东西就是这里返回的东西
		}else if (code == 401) {  // token失效
      		router.push("/login");  // 跳转登录页
    	}else{
			return res.data   
		}
	},
	(error)=>{
		return Promise.reject(error);
	}
)

export default request;