React中如何在componentWillUnmount中取消之前的Promise异步请求？

1.如果是Promise对象

如图，将promise设为一个全局对象，然后在生命周期内更改它的值，如果在组件要卸载时还时Pending状态，就用Promise.race()方法，直接传入一个Promise.reject()与它竞速，那么它就不会继续被执行。

2.如果是XMLHttpRequest对象

例如：const xhr = new XMLHttpRequest()，
则可以用xhr.abort()

3.如果是使用axios封装的ajax

可以使用 CancelToken.source 工厂方法创建一个 cancel token ，如下所示：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

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

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

也可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

注意: 可以使用同一个 cancel token 取消多个请求。