Promise 中如何取消异步操作
在 JavaScript 中，Promise 是一种常用的异步编程方法，它解决了回调地狱、代码可读性等问题，提高了代码的可维护性和可读性。但是，在实际开发中，我们可能需要取消某些异步操作，例如取消从服务器请求数据。那么在 Promise 中，如何取消异步操作呢？接下来，我们将详细探讨 Promise 中如何取消异步操作。
一、Promise 的基本使用方式
在 Promise 中，我们通常使用 Promise 对象进行异步操作，Promise 有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已失败）。Promise 对象通常情况下有两个方法，一个是 resolved（解决）状态的 then() 方法，另一个是 rejected（拒绝）状态的 catch() 方法。
以下是 Promise 的基本使用方式：
// javascriptcn.com 代码示例
function getPromise(){
return new Promise((resolve,reject)=>{
let xhr = new XMLHttpRequest()
xhr.open('GET', '/api/data')
xhr.onload = function() {
if (xhr.status === 200) {
resolve(xhr.responseText)
} else {
reject(xhr.statusText)
}
}
xhr.onerror = function() {
reject(xhr.statusText)
}
xhr.send()
});
}
getPromise().then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})二、Promise 的取消操作
在 Promise 中取消一个异步操作，就是在操作未完成时终止该操作的过程。实现这个目标的方式有很多种，例如可以通过 setTimeout 和 clearTimeout 来模拟一个定时器并终止其运行，也可以在异步函数中设置一个 isCanceled 布尔变量，当其值为 true 时取消异步操作。
但是，在 ECMAScript 的标准库中，并没有提供取消异步操作的方法。不过，一些第三方库提供了这样的方法，例如 axios、fetch 等。这些库通常使用 CancelToken 实现异步操作的取消。
以下是使用 axios 时取消异步操作的示例代码：
// javascriptcn.com 代码示例
import axios from 'axios'
let cancel
const promise = axios.get('/api/data', {
cancelToken: new axios.CancelToken(function executor(c) {
cancel = c
})
})
promise.then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})
// 取消异步操作
cancel()三、知识扩展
理解 Promise 的取消操作，还需要了解以下几个概念：
- Promise.race()
Promise.race() 方法用于比较多个 Promise 对象，返回一个 Promise 对象，该 Promise 对象采用最先 Promise 对象解决或拒绝的结果。以下是 Promise.race() 方法的使用示例：
// javascriptcn.com 代码示例
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.reject(3);
Promise.race([promise1, promise2, promise3]).then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})在上述示例中，Promise.race() 方法返回的 Promise 对象采用了 promise3 的结果，即拒绝状态的结果。
- Promise.all()
Promise.all() 方法用于同时处理多个 Promise 对象，当所有 Promise 对象都完成时，返回一个新的 Promise 对象。以下是 Promise.all() 方法的使用示例：
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(2);
Promise.all([promise1, promise2]).then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})在上述示例中，Promise.all() 方法返回的 Promise 对象的状态采用了 promise2 的结果，即拒绝状态的结果。
四、总结
在 Promise 中，我们可以通过第三方库提供的 CancelToken 或者设置一个 isCanceled 布尔变量来实现异步操作的取消。在实际开发中，我们应该根据业务需求选择合适的方法来取消异步操作。同时，我们还需要掌握 Promise.race() 和 Promise.all() 等常用方法，为开发提供更加丰富的异步编程思路。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65370aeb7d4982a6ebf5c616