axios拦截器 @令狐张豪

Posted 2021-09-01 令狐张豪

下面是一个简易的axios拦截器使用的demo，主要看下代码注释，详细可参考axios官方API

axios

let app = new Vue({
    el: "#app",
    data() {
        return {
            isLoading: false, //loading组件
        }
    },
    mounted() {
        this.getAxios();
    },
    methods: {
        getAxios() {
            let _this = this;
            //这是一个axios的请求拦截器，在我们请求之前做一些事情（比如加载loading）
            axios.interceptors.request.use(function(config) {
                // 显示loading
                _this.isLoading = true;
                return config
            }, function(error) {
                // 请求错误时弹框提示，或做些其他事
                _this.isLoading = false;
                return Promise.reject(error)
            })
			//这是axios的一个请求
            axios.get('https://api.wrdan.com/hitokoto').then((res) => {
                _this.isLoading = false; //请求成功隐藏掉loading
                console.log(res)
            }).catch((err) => {
                _this.isLoading = false;
                console.log(err)
            })
        }
    },
})

// 刚我们说了请求式拦截器，还有一种响应拦截器
axios.interceptors.response.use( function ( response ) { // 对响应数据做一些事情return response;   }, function ( error ) { // 对响应做一些事情错误return Promise .reject(error) ;   });

//再说一下清除拦截器（先声明一个我们所需的拦截器，跟上面一样的，就多了个声明）
const myInterceptor = axios.interceptors.request.use(函数() {/*...*/});
//然后在不想使用的地方清除
axios.interceptors.request.eject(myInterceptor);

---

更多使用请详情查阅 axios 官方api

---

→ 使用promise封装axios ←

---

end~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！
文章对您有所帮助请给作者点个赞支持下，谢谢~