axios拦截上一次请求响应的数据，解决tab切换太快至列表数据错乱

axios 封装 首先引入axios 创建实例

import axios from 'axios'
 
// 创建axios实例
const instance= axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 6000 // 请求超时时间
})

然后加入axios的拦截器

instance.interceptors.request.use(
  config => {
    return config
  },
  (error, response) => {
    console.log(error)
    console.log(response)
  }
)
 
instance.interceptors.response.use(
  response => {
    return response.data
  }, error => {
    console.log(error)
    return Promise.reject(error)
  }
)
export default instance

这个就简单的处理了封装 然后我们继续封装 判断用户的token根据用户token给请求头

即在拦截器请求判断你的用户是不是登录了（这里用到了js-cookie）

import Cookies from 'js-cookie'
if (Cookies.get('Admin-Token')) {
      config.headers['Authorization'] = Cookies.get('Admin-Token')
    }
 //或者
 //Blade-Auth-Token自己本地token存的名字
 const token = localStorage.getItem('Blade-Auth-Token');
 if (token) {
    config.headers['Blade-Auth'] = token
  }
    ```
这里正常的封装就完事了

然后我们加入 当多次请求的时候去除上一次请求
```js
let pending = []
let CancelToken = axios.CancelToken
 
let cancelPending = (config) => {
  pending.forEach((item, index) => {
    if (config) {
      if (item.UrlPath === config.url) {
        item.Cancel() // 取消请求
        pending.splice(index, 1) // 移除当前请求记录
      };
    } else {
      item.Cancel() // 取消请求
      pending.splice(index, 1) // 移除当前请求记录
    }
  })
}

我们用一个数组包含所有请求 在每次请求的时候判断是不是刚刚请求了 如果请求了就取消这个请求

表现出来的就是这样了

全局loading:

先引入element的loading

import { Loading } from ‘element-ui’

let loading
添加函数设置loading展示隐藏

let startLoading = () => { // 使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '加载中……'
    // background: 'rgba(0, 0, 0, 0.7)'
  })
}
let endLoading = () => { // 使用Element loading-close 方法
  loading.close()
}

然后在拦截器中添加函数

具体代码在这里：

import axios from 'axios'
import Cookies from 'js-cookie'
import { Loading } from 'element-ui'
let loading
let pending = []
let CancelToken = axios.CancelToken
 
let cancelPending = (config) => {
  pending.forEach((item, index) => {
    if (config) {
      if (item.UrlPath === config.url) {
        item.Cancel() // 取消请求
        pending.splice(index, 1) // 移除当前请求记录
      };
    } else {
      item.Cancel() // 取消请求
      pending.splice(index, 1) // 移除当前请求记录
    }
  })
}
 
let startLoading = () => { // 使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '加载中……'
    // background: 'rgba(0, 0, 0, 0.7)'
  })
}
let endLoading = () => { // 使用Element loading-close 方法
  loading.close()
}
// 创建axios实例
const instance= axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 600000 // 请求超时时间
})
 
instance.interceptors.request.use(
  config => {
    if (Cookies.get('Admin-Token')) {
      config.headers['Authorization'] = Cookies.get('Admin-Token')
    }
    //或者本地存储
    //const token = localStorage.getItem('Blade-Auth-Token');
 	//if (token) {
    	//config.headers['Blade-Auth'] = token
  	//}
    cancelPending(config)
    config.cancelToken = new CancelToken(res => {
      pending.push({'UrlPath': config.url, 'Cancel': res})
    })
    startLoading()
    return config
  },
  (error, response) => {
    console.log(error)
    console.log(response)
  }
)
 
instance.interceptors.response.use(
  response => {
    endLoading()
    cancelPending(response.config)
    return response.data
  }, error => {
    console.log(error)
    return Promise.reject(error)
  }
)
//redful配置，也可自行配置
const request = ({
    url,
    method = 'get',
    data,
    params,//对于表头是表单类型的post请求
    headers
}) => {
    return new Promise((resolve, reject) => {
        switch (method.toUpperCase()){
            case 'POST':
                let realData = {}
                if(headers['Content-Type'] === 'application/x-www-form-urlencoded'){
                    const p = new URLSearchParams()
                    for(let key in data){
                        p.append(key,data[key])
                    }
                    realData = p
                }else{
                    realData = data
                }
                instance.post(url,data = realData,{
                    headers
                }).then(res => {
                    resolve(res)
                }).catch(err => {
                    reject(err)
                })
                break;
            default :
                instance.get(url,{
                    method,
                    params,
                    headers
                })
                        .then(res => {
                            resolve(res)
                        }).catch(err => {
                            reject(err)
                        })
                break;
        }
    })
}
export default request

————————————————

本文链接： https://blog.csdn.net/weixin_38641550/article/details/84940663