基于axios的请求拦截

基于axios的请求拦截

• 使用场景：连续发次多个异步请求，最终拿到的请求的结果很大程度上不是最后一次发起的请求结果

• 所以我们需要每次发起请求的时候，将之前的请求给停止掉，从而保证我们拿到的是最后一次请求的结果

• 两者的区别，就是在传参的时候的写法不一样而已

  post请求

let source = '' // 创建一个空的source对象
function getData() {
  if(source) source.cancel() // 停止之前的请求
  // 这里初始化source对象
  source = axios.cancelToken.source()
  // 发起新的请求
  axios.get('请求地址',
    {
      name: 'xxx',
      age: '22',
    }, 
    // 其实就这里的格式不一样
    {
      cancelToken: this.source.token // 用于拦截的对象
    })
    .then(result => {
      // 处理请求成功的结果
      console.log('请求结果：' + result.data)
    })
    .catch(result => {
      // 如果调用了cancel方法，那么这里的result就是cancel传入的信息
      // 或则处理错误的逻辑
    })
}

get请求

let source = '' // 创建一个空的source对象
function getData() {
  if(source) source.cancel() // 停止之前的请求
  // 这里初始化source对象
  source = axios.cancelToken.source()
  // 发起新的请求
  axios.get('请求地址',
    {
      params: {
        name: 'xxx',
        age: '22'
      },
      cancelToken: this.source.token // 用于拦截的对象
    })
    .then(result => {
      // 处理请求成功的结果
      console.log('请求结果：' + result.data)
    })
    .catch(result => {
      // 如果调用了cancel方法，那么这里的result就是cancel传入的信息
      // 或则处理错误的逻辑
    })
}