由于 JavaScript 通常是由单线程来执行代码,所以在编写 JavaScript 代码时经常需要使用异步操作来提高程序性能。一般来说异步执行在 JavaScript 中使用 回调函数
的形式来实现。不过近年来由于社区的推动,Promise
已经成为 JavaScript 异步编程的一个标准,使用 Promise
进行异步编程,代码的可维护性将有很大提升,尤其是使用 Promise
取代多层 回调函数
嵌套的问题。
Promise
简介
下面是构造一个最简单的 Promise
代码示例:
// 构造 Promise
const promise = new Promise(function (resolve, reject) {
// 异步操作代码
if (异步操作成功) {
resolve(this.response);
} else {
reject(this.status);
}
});
// promise 状态改变时的回调
promise.then(function (res) {
console.log(res); // 执行成功回调
}, function (error) {
console.log(error); // 执行失败回调
})
Promise
是 JavaScript 提供的一个对象,可以通过 new
关键字构造这个对象。Promise
构造函数接收一个函数作为参数,该函数接收另外两个函数作为参数,分别是 resolve
、reject
,这两个函数由 JavaScript 引擎自身提供,无需我们手动创建。
Promise
对象有三种状态,分别是:pending
(进行中)、fulfilled
(已成功)、rejected
(已失败)。有两种状态改变,一种是从 pending
变为 fulfilled
,另一种是从 pending
变为 rejected
,一旦状态改变,状态就会凝固,无法被再次更改。而 resolve
的作用就是将 Promise
对象的状态从 pending
变为 fulfilled
,reject
的作用是将 Promise
对象的状态从 pending
变为 rejected
。
通常我们在传递给 Promise
构造函数的函数顶部编写一些异步代码,例如一个 AJAX
请求,然后当异步代码执行成功的时候,调用 resolve
,resolve
是一个函数,它能够接收参数,所以我们调用它时可以将异步代码的执行结果传递给它,此时 resolve
函数有两个作用,一是改变 Promise
的状态为 fulfilled
,二是它能够将传递进去的参数传递到 promise
实例的 then
方法的第一个回调函数中,待后续操作使用。异步代码执行失败时调用 reject
函数,此时 reject
函数同样有两个作用,一是改变 Promise
的状态为 rejected
,二是将传递进去的参数传递到 promise
实例的 then
方法的第二个回调函数中。
当 Promise
状态一旦改变,我们就可以通过 Promise
对象的实例(promise
变量)的 then
方法获取到异步操作的结果。then
方法接收两个回调函数作为参数,第一个回调函数会在 Promise
状态变为 fulfilled
的时候自动调用,第二个回调函数会在 Promise
状态变为 rejected
的时候自动调用。这两个回调函数分别接收一个参数,第一个回调函数接收到的 res
参数实际上就是我们在 Promise
内部异步代码执行成功时传递给 resolve
的参数,第二个回调函数接收到的 error
参数是在 Promise
内部异步代码执行失败时传递给 reject
的参数。
以上就是 Promise
对象的执行流程,接下来我们就用一个示例来展示 Promise
在实际编写代码中如何应用。
先来看一段用 回调函数
的写法发送 AJAX
请求的代码示例:
function handleResponse() {
if (this.readyState === 4) {
if (this.status === 200) {
console.log(this.response);
} else {
console.log(this.status);
}
}
}
const<