1.需求背景

需要做一个上传图片，识别图片内容的功能。因为识别时间过长，需要增加一个中断识别的按钮。

2.效果

3.实现代码

// 识别
async function fileTypeChange(item,formData) {
    item.cancelTokenSource = axios.CancelToken.source(); // 给每张图片对象数据添加一个cancelTokenSource，创建一个取消令牌源
    await axios.post(danjuApi.baseUrl + '/osgi/getResult', formData, {
      cancelToken: item.cancelTokenSource.token // cancelToken这个是固定属性，取值方式".token"固定方式，这里相当于再给每个请求添加唯一标识
    }).then(res => {
      console.log('响应数据:', res.data);
    }).catch(error => {
      ElMessage.error(error.message)
    }).finally(() => {
      item.cancelTokenSource = null; // 请求完后清空取消令牌源
    })
}

// 取消识别
const cancelRequest = (item) => { // item是每张图片对象数据，识别时已经存储了取消令牌源
  if (item.cancelTokenSource) {
    item.cancelTokenSource.cancel('用户取消识别'); // 通过cancel()方法就可以取消请求了
  }
};

4.说明

get和post请求方式都是在第三个参数位置添加{cancelToken: item.cancelTokenSource.token}，取消时调用cancel()方法就行了；重点在于创建一个取消令牌源，给请求点添加取消标识