在Vue中如何使用axios请求拦截

1、前言

---

 

在这里和你们分享一下axios拦截在实际项目中的使用 (转载出处:  http://www.javashuo.com/article/p-shvziddp-cy.html )

不少人都看过axios的官方文档中拦截器这一栏，有的人可能会有点懵，由于文档只告诉你有这个东西，而不告诉你在什么状况下使用。不少初学者就会放弃使用axios拦截器，毕竟拦截器是能够不使用的，可是使用拦截器，会在页面中减小不少没必要要的代码。

2、说在前面的

---

 

项目使用的ui框架是iview

如下友好提示均使用iview ui的message提示组件，例如this.$Message.xxx
/api/request 仅仅只是例子接口，实际开发用后台提供的接口。
code是后台状态码，我这里也只是例子，不要问我为毛个人返回码和你的怎么不同这样的问题哈...这些都须要和后台沟通约定的。
使用的请求头是：axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';至于为何使用这个请求头能够看看个人另一篇文章关于axios会发送两次请求，有个OPTIONS请求的问题
由于使用的是这个请求头因此须要用qs模块，否则后台不认这个数据。

3、不使用请求拦截

---

 

若是不使用请求拦截，也是能够的，可是会多了很是多的代码，咱们以登陆页为例。

一个单纯，没有花里胡哨的页面，|ω・）

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
    //特殊错误处理，状态为10时为登陆超时
    if(data.data.code === 10){
        this.$Message.error("登陆已超时，请从新登陆")
        this.$router.push("/login")
    //其他错误状态处理    
    }else if(data.data.code != 0){
        this.$Message.error(data.data.msg)
    //请求成功
    }else if(data.data.code === 0){
        //进行成功业务逻辑
    }
    //.......
});

若是不使用请求拦截，那么对每一条该请求的每个状态都要特殊处理，若是请求特殊状态有数十个，每一个页面有不少请求，那么页面会变得很长很臃肿，很差维护。

3、使用请求拦截

---

 

相同的请求返回代码咱们能够抽取出来，写在请求拦截中
当咱们设置了拦截以后，在咱们的组件代码中能够简化不少，仍是以登陆界面为例：

在main.js中

//请求发送拦截，把数据发送给后台以前作些什么......
axios.interceptors.request.use((request) => {

  //这个例子中data是loginName和password
  let REQUEST_DATA = request.data
  //统一进行qs模块转换
  request.data = qs.stringify(REQUEST_DATA)
  //再发送给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//请求返回拦截，把数据返回到页面以前作些什么...
axios.interceptors.response.use((response) => {
  //特殊错误处理，状态为10时为登陆超时
  if (response.data.code === 10) {
    iView.Message.error("登陆已超时，请从新登陆");
    router.push("/login")
  //其他错误状态处理    
  } else if (response.data.code != 0) {
    iView.Message.error(response.data.msg)
  //请求成功
  } else if(response.data.code === 0){
    //将咱们请求到的信息返回页面中请求的逻辑
    return response;
  }
 //......

}, function (error) {
  return Promise.reject(error);
});
//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data，若是请求的数据状态code不为0,会被拦截，则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});

这样咱们就对axios请求添加了拦截，能够减小不少代码逻辑，页面可读性更高，可维护性也更高

4、其余

---

 

这就是axios拦截的最基础的用法，固然也不止于此，咱们也能够进行扩展延伸，作更多的事情，只要你的业务有需求，axios拦截总能帮到你，这些就须要触类旁通，工具是死的人是活的，我能够再举个小例子，好比设置请求签名。

请求签名是前台和后台约定的一种沟通方式，对数据进行加密，能够必定程度上保证数据的安全性

仍是以这个登陆页面为例

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data，若是请求的数据状态code不为0,会被拦截，则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});

咱们把httpRequest这个data信息数据发送给后台以前，进行签名，并加密数据
在main.js中，咱们对发送的数据进行拦截

//请求发送拦截
axios.interceptors.request.use((request) => {

  //获取请求的数据，这里是loginName和password
  let REQUEST_DATA = request.data
  //获取请求的地址，这里是/api/request
  let REQUEST_URL = request.url
   
  //设置签名并进行qs转换，且赋值给request的data，签名函数另外封装
  request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
  //发送请求给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//已封装好的签名函数
function requestDataFn(data, method) {

  let postData = {}

  //时间戳，时间戳函数不做展现，也是已封装好的
  postData.timestamp = getNowFormatDate();

  //请求用户的session以及secretKey信息,为空是未登陆，登陆后我把它存在localStorage中，这个存在哪里均可以，这里只做为例子。
  postData.session = localStorage.getItem('session') || '';
  postData.secretKey = localStorage.getItem('secretKey') || '';
  
  //请求的地址，这里是/api/request
  postData.method = method;
    
  //请求的数据这里是loginName和password，进行base64加密
  let base64Data = Base64.encode(JSON.stringify(data));
   
  //设置签名并进行md5加密
  let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
   
  //把数据再次进行加密
  postData.data = encodeURI(base64Data);

  postData.signature = signature;
   
  return postData
}

 

这样咱们就完成了对数据加密以及签名，这样再发送给后台。

注意：这里只做为例子展现，若是须要用到签名，如何签名，是前台和后台沟通的结果!axios请求拦截的用处远远不止这样，具体如何使用，还须要在实际工做，实际项目中随机应变啦。