Vue的axios拦截器

Vue的axios拦截器为什么要使用拦截器？在页面发送http请求，很多情况我们要对请求和其响应进行特定的处理，如：判断token，设置请求头。如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。所以axios为开发者提供了这样一个API：拦截器。拦截器分类？拦截器分为请求（request）拦截器和响应（response）拦截器代码实现mounted(){le

龟中的程序员

2188人浏览 · 2022-04-14 15:21:01

龟中的程序员 · 2022-04-14 15:21:01 发布

Vue的axios拦截器

为什么要使用拦截器？

在页面发送http请求，很多情况我们要对请求和其响应进行特定的处理，如：判断token，设置请求头。如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。

所以axios为开发者提供了这样一个API：拦截器。

拦截器分类？

拦截器分为请求（request）拦截器和响应（response）拦截器

代码实现

mounted(){
   let that = this;
   // 组件被挂载  可以操作数据
   // 1、请求拦截
   axios.interceptors.request.use(function(config){
       // 请求之前可以做一些处理、操作
       // eg：请求的loading动画
       // 为所有的请求添加公用部分 =>  比如接口前面的配置都是一样的  在这里就可以把相同的抽离出来  统一添加
       console.log('请求即将开始');
       return config;
   },function(err){
       //请求错误之前可以进行处理
       return Promise.reject(err)
   });
   // 2、拦截响应
   axios.interceptors.response.use(function(response){
       //对返回的数据进行操作
       console.log('即将返回我们想要的数据');
       console.log(response);
       // if(response.data.code == 240){
       //     that.msg = '联系coder处理'
       // }
       if(response.data.code == 240){
           response  = '联系coder处理'
       }
       
       return response
   },function(err){
       return Promise.reject(err)
   })
}

Vue拦截案例

请求一个接口，post请求需要带key值传参，如果没有key，在响应拦截中拦截错误进行信息返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>post</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <button @click="post">Post请求</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return{
                    msg:'POST请求',
                    postUrl:"http://api.tianapi.com/networkhot/index",
                }
            },
            mounted(){
                let that = this;
                // 组件被挂载  可以操作数据
                // 1、请求拦截
                axios.interceptors.request.use(function(config){
                    // 请求之前可以做一些处理、操作
                    // eg：请求的loading动画
                    // 为所有的请求添加公用部分 =>  比如接口前面的配置都是一样的  在这里就可以把相同的抽离出来  统一添加
                    console.log('请求即将开始');
                    return config;
                },function(err){
                    //请求错误之前可以进行处理
                    return Promise.reject(err)
                });
                // 2、拦截响应
                axios.interceptors.response.use(function(response){
                    //对返回的数据进行操作
                    console.log('即将返回我们想要的数据');
                    console.log(response);
                    // if(response.data.code == 240){
                    //     that.msg = '联系coder处理'
                    // }
                    if(response.data.code == 240){
                        response  = '联系coder处理'
                    } 
                    return response
                },function(err){
                    return Promise.reject(err)
                })
            },
            methods:{
                post(){
                   axios.post(this.postUrl+'?key=04c33fe9934dc4ce67afc0d7a41a80d7',{
                       headers:{
                           'Content-Type':'application/x-www-form-urlencoded'
                       }
                   }).then(
                       //promise 语法
                       // .then  代表成功获取数据之后的操作
                   res=>{//res  == response 代表返回值
                    this.msg = res
                   }).catch(err=>{
                    console.log(err);
                   })
                }               
            }
        })
    </script>
</body>
</html>