umi-max中的请求怎么中止

Question

umi-max中的请求应该怎么中止

在公司项目中要上传一个文件，包比较大，上传时间长，在用户取消上传包的时候怎么中止这个请求

Answer 1

//使用axios的cancelToken的方法
import { request } from 'umi';

//创建一个cancelToken的source
const source = request.CancelToken.source();

//发送请求时，传递cancelToken参数
request('/api/upload', {
  method: 'POST',
  data: file,
  cancelToken: source.token,
}).then(response => {
  //处理响应
}).catch(error => {
  //处理错误
});

//在用户点击取消按钮时，调用cancel方法
source.cancel('User canceled the upload');

//使用fetch的AbortController的方法
import { request } from 'umi';

//创建一个AbortController实例
const controller = new AbortController();

//发送请求时，传递signal参数
request('/api/upload', {
  method: 'POST',
  data: file,
  signal: controller.signal,
}).then(response => {
  //处理响应
}).catch(error => {
  //处理错误
});

//在用户点击取消按钮时，调用abort方法
controller.abort();

//使用react-query的cancelQuery的方法
import { useQuery, useMutation, useQueryClient } from 'react-query';

//创建一个queryClient实例
const queryClient = useQueryClient();

//发送请求时，给请求一个唯一的key
const { data, error, isLoading } = useQuery('upload', () => {
  return request('/api/upload', {
    method: 'POST',
    data: file,
  });
});

//在用户点击取消按钮时，调用cancelQuery方法，传入请求的key
queryClient.cancelQuery('upload');