Vue中使用axios请求拦截的方法介绍

ω?）

//双向数据绑定获取值
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){
        //进行成功业务逻辑
    }
    //.......
});

如果不使用请求拦截，那么对每一条请求每一个状态都要特殊处理，如果请求特殊状态有数十个，每个页面有很多请求，那么页面会变得很长很臃肿，不好维护。

相同的请求返回代码我们可以抽取出来，写在请求拦截中
当我们设置了拦截之后，在我们的组件代码中可以简化很多，还是以登录界面为例：

//请求发送拦截，把数据发送给后台之前做些什么...... 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请求添加了拦截，可以减少很多代码逻辑，页面可读性更高，可维护性也更高
四、其他
这就是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')   关键词：Vue中运用axios请求拦截的办法介绍