axios拦截器基本用法

axios

作用

1. 请求拦截器 在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装；(比如判断get请求可以统一的进行转码)
2. 响应拦截器 同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。（响应拦截器会拦截在调用.then或.catch之前）

不用拦截器也呢个达到这种效果（但是代码量会大）。 之后想不起来 参考

https://www.jianshu.com/p/a0c67f4e145e        

代码大概格式(项目中实际用过，我接手时候别人已经写完了...)，安装axios就不用说了哈。

import axios from  "axios";    

axios.defaults.header["Content-Type"] =  'application/json;charset=utf-8';//jso 格式 默认 

let service = axios.create({
baseURL:'共用的请求路径'//可以用到上次说的环配置变量,根目录下面三个环境配置文件VUE_APP_BASE_API
setTime://超时时间   还有各种配置  可以去看axios的api
})

//请求拦截器  接受两个参数
service.interceptors.request.use(config=>{
   //config参数应该是带了本次请求的一些信息，我们就可以在这个位置做一些 需要做的事情，加token，加时间戳，get请求加码之类的。
    return  config;
},error=>{
//请求失败
     Promise.reject(error)
})

//响应拦截
service.interceptors.response.use(res=>{
//res服务端请求带回的信息，可以做一些操作，比如判断token是否有过期，统一简化数据格式
    if(res.code === 401){
    //跳转 login页面    这边查了一下为什么要错误返回一个promise对象，据说是loading使用，还没有机会实践
        return Promise.reject('令牌失效');
    }else if(res.code == 500){
    //返回错误码
         return Promise.reject(res.coude);
    }else{
         return res.data
    }
    },error=>{
        return Promise.reject(error)
    }
)

export default service

以上大概的一个请求拦截和相应拦截的一个用法，调用，新建一个request.js

import  service  from  "service路径";

let request  = {
       getFn(url){
           return service({
           url:url,
           method："get"
           })
       },
       postFn(url,data){
        return service({
           url:url,
           method："post",
           data:data
           })
       }
}
//上面例举两种  还有put，delete就不写了

export default request;

main.js

import Vue  from "vue";
import 
import Request  from "request.js路径";
//  挂载vue原型上
Vue.prototype.$request = Request;

调用index.js

<template>
    <div>
        <button  @click="testRequest">testRequest</button>
    </div>
</template>
<script>
    export default{
        methods:{
            testRequest(){
                this.$request.get(请求路径.then((res)=>{
                //成功处理
                }).catch((er)=>{
                //失败处理
                })
            }
        }
    }
</script>