axios请求及响应拦截

对于一次http请求简单来讲，就两个过程（非http建立连接过程），一是将前端请求发送到后端，二是将后端处理后的数据拿到。那么在请求发送之前，以及数据返回之后，我们都可以对请求的结构以及返回的数据做一个处理，然后在将请求发给后端（如在请求头中增加token），如果是后端返回数据，则可以根据状态码来进行提前的一个提示。以下就对axios封装的代码做一个简单的介绍。

对axios进行基础配置

import axios from 'axios';  // 该处引入axios模块

// 构建axios实例
const instance = axios.create({
	baseURL: process.env.BASE_API,  // 该处url会根据开发环境进行变化（开发/发布）
	timeout: 10000  // 设置请求超时连接时间
})

request拦截器（请求发送后端之前）

instance.interceptors.request.use(
	config => {
		console.log(config);  // 该处可以将config打印出来看一下，该部分将发送给后端（server端）
		config.headers.token = '该处可设置token内容';
		return config  // 对config处理完后返回，下一步将向后端发送请求
	},
	error => {  // 当发生错误时，执行该部分代码
	    console.log(error); //调试用
	    return Promise.reject(error)
	}
)

response拦截器（数据返回后，具体页面加载之前）

instance.interceptors.response.use(
	response => {  // 该处为后端返回整个内容
		const res = response.data;  // 该处可将后端数据取出，提前做一个处理
		if ('正常情况') {
			return response  // 该处将结果返回，下一步可用于前端页面渲染用
		} else {
			alert('该处异常');
			return Promise.reject('error')
		}
	},
	error => {
		console.log(error),
		return Promise.reject(error)
	}
)

将axios实例导出，方便其他页面调用

export default instance

其他页面调用上述实例发送请求

import instance from '../xxx.js';  // 将实例导入
const qs=require('qs');  // 用于处理前端发送数据格式
const base = process.env.BASE_URL;  // 该处根据开发环境变化

export const login = params => {return instance.post(`${base}/login`, qs.stringify(params)).then(res => res.data)}  // 该处即可实现向后端发送请求，并将数据返回给调用该接口的位置

如果对大家有帮助的话，欢迎点赞?