axios请求的取消

解决：axios请求的取消

在使用 Axios 发起请求时，有时候你可能需要取消这些请求，比如当组件销毁时或者用户操作导致不再需要获取之前发起的请求结果。Axios 支持通过 Cancel Token 取消请求。

以下是使用 Axios 的 CancelToken 来取消请求的基本步骤：

创建 Cancel Token：
首先你需要创建一个取消令牌（Cancel Token）。从 Axios 0.18.0 版本开始，推荐的方式是使用 axios.CancelToken.source() 工厂函数来创建一个包含 token 和 cancel 方法的对象。

const source = axios.CancelToken.source();

配置请求使用 Cancel Token：
在发起请求时，将上面创建的 token 传递给请求配置中的 cancelToken 字段。

axios.get('/user/12345', {
  cancelToken: source.token
})
.then(function(response) {
  // 处理成功情况
})
.catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误情况
  }
});

取消请求：
如果你想取消发起的请求，只需调用 source.cancel() 方法，并可以传入一个可选的取消原因作为参数。

source.cancel('用户取消了请求');

在 Vue 组件中管理取消逻辑（例如，在组件销毁前取消请求）：

export default {
  data() {
    return {
      cancelSource: null,
    };
  },
  methods: {
    fetchData() {
      this.cancelSource = axios.CancelToken.source();

      axios.get('/someEndpoint', {
        cancelToken: this.cancelSource.token
      })
      .then(response => {
        // 处理响应数据
      })
      .catch(error => {
        if (axios.isCancel(error)) {
          console.log('Request canceled');
        } else {
          // 处理其他错误
        }
      });
    }
  },
  beforeDestroy() {
    if (this.cancelSource) {
      this.cancelSource.cancel('Component destroyed, request canceled.');
    }
  }
}

以上是在Vue 2 中使用 Axios 取消请求的方法。记得合理管理你的取消令牌，避免内存泄漏或其他潜在问题。

最后附上示例

• 示例：在输入框里输入1234，会发送4次请求，但只会保留1个请求，其余的请求会被取消

接口处添加cancelToken

export function getERPInfoByDeviceCode(data, cancelToken) {
  return request({
    url: '/v1/dfs/deviceInfo/getERPInfoByDeviceCode',
    method: 'post',
    params: data,
    cancelToken, // 添加取消令牌
  })
}

使用取消请求

// 此处template代码为输入框绑定input事件给getERPInfoByDeviceCodeData()方法即可
<script>
import { getERPInfoByDeviceCode } from '@/api/standard/device-base-api'
import axios from 'axios'
export default {
  data() {
    return {
      cancelToken: null, // 保存取消令牌的引用
    }
  },
  methods: {
    async getERPInfoByDeviceCodeData() {
      // 如果存在之前的请求，取消它
      if (this.cancelToken) {
        this.cancelToken.cancel('用户取消了请求')
      }
      // 创建新的取消令牌
      const cancelTokenSource = axios.CancelToken.source()
      this.cancelToken = cancelTokenSource
      try {
        const params = {}
        // 请求接口传入cancelTokenSource.token配置
        await getERPInfoByDeviceCode(params, cancelTokenSource.token)
      } catch (error) {
        if (axios.isCancel(error)) {
          console.log('Request canceled:', error.message)
        } else {
          // 处理其他错误
          console.error('Error fetching info:', error)
        }
      }
    },
  },
}
</script>