无畏文件上传的卡顿——详解Axios中断和恢复请求

2023-08-29 03:45:11

Axios 中的请求中断和恢复

引言

在前端开发中，处理大型文件上传或数据传输时，可能会遇到需要中断或恢复请求的情况。Axios，一个流行的 HTTP 客户端库，提供了强大的功能来简化这一过程。

中断请求

在 Axios 中，使用 axiosSource.cancel() 方法可以轻松中断请求。它接受一个可选的参数，该参数可以指定取消请求的原因，例如用户取消或网络故障。

const axiosSource = axios.CancelToken.source();

axios({
  method: 'post',
  url: '/upload',
  data: formData,
  cancelToken: axiosSource.token,
}).then((response) => {
  console.log(response.data);
}).catch((error) => {
  if (axios.isCancel(error)) {
    console.log('请求已取消');
  } else {
    console.log('请求失败', error.message);
  }
});

// 中断请求
axiosSource.cancel('操作已取消');

在上面的示例中，axiosSource.cancel() 调用会触发 catch 块，并在 error 对象上设置 canceled 属性，允许您识别已取消的请求。

恢复请求

有时，您可能需要在中断后恢复请求。Axios 提供了 axiosSource.token.throwIfRequested() 方法来实现这一功能。调用此方法会引发一个错误，触发 catch 块，就像最初取消请求时一样。

const axiosSource = axios.CancelToken.source();

axios({
  method: 'post',
  url: '/upload',
  data: formData,
  cancelToken: axiosSource.token,
}).then((response) => {
  console.log(response.data);
}).catch((error) => {
  if (axios.isCancel(error)) {
    console.log('请求已取消');
  } else {
    console.log('请求失败', error.message);
  }
});

// 中断请求
axiosSource.cancel('操作已取消');

// 恢复请求
axiosSource.token.throwIfRequested();

axios({
  method: 'post',
  url: '/upload',
  data: formData,
  cancelToken: axiosSource.token,
}).then((response) => {
  console.log(response.data);
}).catch((error) => {
  if (axios.isCancel(error)) {
    console.log('请求已取消');
  } else {
    console.log('请求失败', error.message);
  }
});

在这种情况下，取消请求后，axiosSource.token.throwIfRequested() 会重新触发请求过程，允许您恢复已中断的请求。

用例

请求中断和恢复功能在以下情况下非常有用：

取消由用户操作触发的正在进行的请求。
在网络条件恶化时防止长时间运行的请求。
允许用户在传输大型文件时暂停和恢复上传。

常见问题解答

如何检查请求是否已取消？
- 使用 axios.isCancel(error) 方法，它将在 error 对象上设置一个 canceled 属性。
取消请求后还可以继续使用 axiosSource 吗？
- 可以，axiosSource 会保持激活状态，直到手动释放或页面刷新。
恢复请求时需要使用相同的 axiosSource 吗？
- 是的，需要使用创建取消请求的 axiosSource 实例。
取消请求会影响其他同时进行的请求吗？
- 不，每个 axiosSource 实例都是独立的，不会影响其他请求。
可以在不使用 CancelToken 的情况下中断请求吗？
- 虽然使用 CancelToken 是首选方法，但也可以通过设置 XMLHttpRequest.abort() 来强制中断请求。