axios拦截器设置及其实现原理剖析

蔚落 2023-02-20 12:11 76阅读 0赞

[axios使用说明文档][axios]

## axios拦截器设置 ##

**应用场景**  
请求拦截器用于在接口请求之前做的处理，比如为每个请求带上相应的参数（token，时间戳等）。  
返回拦截器用于在接口返回之后做的处理，比如对返回的状态进行判断（token是否过期）。  
**拦截器的使用**  
1、在src目录下建立api文件夹  
2、文件夹内建立axios.js文件，进行接口请求的初始化配置

import axios from 'axios'
    let instance = axios.create({ 
        baseURL: "http://localhost:3000/",
        headers: { 
            'content-type': 'application/x-www-form-urlencoded'
        }
    })
    //请求拦截器
    instance.interceptors.request.use(config => {  //拦截请求，做统一处理
        const token = "asdasdk"
        //在每个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))

5、效果展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200627111201456.png]

## axios拦截器实现原理剖析 ##

**axios接口请求内部流程**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70 1]

**axios原理简化**

[axios]: https://www.kancloud.cn/yunye/axios/234845
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627111129341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw==,size_16,color_FFFFFF,t_70
[20200627111201456.png]: https://img-blog.csdnimg.cn/20200627111201456.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200626183510641.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw==,size_16,color_FFFFFF,t_70