源码时代前端干货分享| Axios的请求与响应拦截步骤详解

一、使用场景

Axios作为React,Vue,Angular最常使用的HTTP请求库,承担了大部分请求的发送和接收。

在项目中,开发者经常会遇到两种情景

一:在每次发送请求时,携带用户token方便后台做用户相关操作

二:服务器所有接口都会返回一个错误码,比如10001,请求参数错误。 10002,用户未授权等等,我们需要在收到响应后对错误码进行相关提示。

如果我们在每个接口都进行验证那太麻烦,代码冗余不说,后期维护成本也很高,到处找接口进行代码改动。Axios提供了非常方便的一种功能:请求/响应拦截器。我们就可以在这种场景派上用场。

 

  • 请求拦截器

场景:在每次发送请求时,携带用户token方便后台做用户相关操作

在每次发送请求前,都会进入请求拦截器,我们可以在此处统一绑定上想要发送的参数,则每个请求都会自动携带token

axios.interceptors.request.use(

config => {

    //config是axios配置对象

        //每次发送请求前都会进入此拦截器处理函数,可以在此处统一携带上token,每次请求都会自

        config.headers.common['token'] = localStorage.getItem(token);

        return config

    },

err => {

    //请求出错的处理函数

        return Promise.reject(err)

    })

 

 

  • 响应拦截器

场景:服务器所有接口都会返回一个错误码,比如10001,请求参数错误。 10002,用户未授权等等,我们需要在收到响应后对错误码进行相关提示。

在每次收到响应时,都会先进入响应拦截器,在分发给各个请求函数,我们可以在此处统一先处理错误码,在进入各自的响应细节函数处理res

 

axios.interceptors.response.use(function(res){

//收到响应后,可以先统一处理错误码

switch (res.data.code) {

       case 10001:   alert(非法操作);

router.push({path: '/});

       case 10002:  alert(权限不足’);

       ......

    }

    return res;

},function(err){

    //响应出错进入的函数

    return Promise.reject(err);

});

以上就是axios拦截器的使用教程及场景,希望对大家有所帮助,不管任何项目,只要使用的是axios发送请求,则都可以使用拦截器进行统一处理,减少冗余代码,降低二次开发及维护难度。

(本文由源码时代技术老师撰写,转载请注明出处)

你可能感兴趣的:(源码时代前端)