axios拦截器的原理及应用

1-1 应用场景：

1、

• 请求拦截器用于在接口请求之前做的处理，比如为每个请求带上相应的参数（token，时间戳等）
• 返回拦截器用于在接口返回之后做的处理，比如对返回的状态进行判断（token是否过期）

1-2 拦截器的使用

1、 在src目录下建立api文件夹
2、 文件夹内建立axios.js文件，进行接口请求的初始化配置

import axios from 'axios'
let instance = axions.create({
	baseURL: "",
	headers: {
		'content-type': 'application/x-www-form-urlencoded'
	}

	// 请求拦截器
	instance.interceptors.request.use(config => {
		const token = "afdf"
		// 在每个http header都加上token
		config.headers.authorization = token
		return config
	}, err => {
		return Promise.reject(err)
	})
})

// 响应拦截器
instance.interceptors.response.use(response => {
	if(response.data.code) {
		switch(response.data.code) {
			case 200: console.log("1111")
		}
	}
	return response
},err=> {
	return Promise.reject(err.response.status)
})
export default instance

3、 在main.js中引入，并将其绑定到vue原型上，设为全局，不用在每个页面重新引入

import instance from './api/axios'
Vue.prototype.$http = instance

4、 页面使用

this.$http.get(url).then(r => console.log(r)).catch(err => console.log(err))
this.$http.post(url,params).then(r => console.log(r)).catch(err => console.log(err))

1-3 axios拦截器实现原理剖析

1-4 axios原理简化

1、

function Axios() {
	this.interceptors = {
		// 两个拦截器
		request: new interceptorsManner(),
		response: new interceptorsManner(),
	}
}

// 真正的请求
AXions.prototype.request = function() {
	let chain = [dispatchRequest, undefined];    // undefined是为了补位，拦截器的返回有两个
	let promise = Promise.resolve();
	// 将两个拦截器中的回调加入到chain数组中
	this.interceptors.request.handler.forEach((interceptor) => {
		chain.unshift(interceptor.fulfilled, interceptor.rejected);
	})
	this.interceptors.response.handler.forEach((interceptor) => {
		chain.push(interceptor.fulfilled, interceptor.rejected);
	})
	while(chain.length) {
		// promise.then的链式调用，下一个then中的chain为上一个中的返回值，每次会减去两个
		// 就实现了在请求的时候，先去嗲用请求拦截器的内容，再去请求接口，返回之后再去执行相应拦截器的内容
		promise = promise.then(chain.shift(), chain.shift());
	}
}

function interceptorsManner () {
	this.handler =　[] 
}
interceptorsManner.prototype.use = function(fulfilled,rejected) {
	// 将成功与失败的回调push到handler中
	this.handler.push({
		fulfilled: fulfilled,
		rejected: rejected
	})
}

// 类似方法批量注册，实现多种请求
util.forEach(["get", "post","delete"],(methods) => {
	Axios.prototype[methods] = function(url,config) {
		return this.request(util.merge(config || {}, {
			// 合并
			methods:methods,
			url: url
		}))
	}
})