axios取消请求

axios取消请求，主要用于避免不必要的网络开销，优化用户体验。

1. 场景描述

用户短时间内多次触发同一请求，若不取消请求，数据返回顺序错乱，展示数据出现问题。
比如：

• 搜索框实时联想（用户快速输入时，取消上一次未完成的搜索请求）；
• 表单提交按钮（防止用户重复点击触发多次提交）；
• 分页切换（快速切换页码时，取消上一页的请求）；
• 多条件数据筛选（如按时间、状态、类型筛选列表）；

2. 实现实例

在业务组件中调用接口前的处理

  let abortController: AbortController | null = null
  const getDataList = async () => {
     // 取消之前可能正在进行的请求
    if (abortController) {
      abortController.abort()
      abortController = null
    }

    // 延迟一点时间确保取消生效
    await new Promise(resolve => setTimeout(resolve, 50))
    // 开始新的请求，创建新的AbortController
    abortController = new AbortController()

    loading.value = true
    try {
      // 发起请求并传递signal
      const { data, code, msg } = await riskCompanyPage(searchForm, abortController?.signal)
      if (code !== 200) return console.error('获取列表失败:', msg)
      // 处理当前页数据，添加排名
      tableList.value = data.records
      searchForm.total = data.total
    } catch (error) {
      // 忽略取消请求导致的错误
      if (!(error instanceof Error && error.name === 'AbortError')) {
        console.error('获取列表失败:', error)
      }
    }
  }