在这篇教程中,我们将掌握如何在JavaScript中创建并使用Promise。我们将了解Promise链式调用、错误处理以及最近添加到语言中的一些Promise静态方法。
在JavaScript中,一些操作是异步的。这意味着当这些操作完成时,它们产出的结果或者值并不会立即生效。
Promise是一个特殊的JavaScript对象,它代表了异步操作的最终结果。它就像操作结果的代理。
在拥有JavaScript Promise之前,处理异步操作最优雅的方式是使用回调。当异步操作的结果就绪时,回调就是一个运行的函数。比如说:
setTimeout(function() {
console.log('Hello, World!');
}, 1000);
这里,setTimeout是一个异步函数,在指定的毫秒数后运行传递给它的回调函数。在本例中,它在一秒后将 "Hello, World!"打印到控制台。
此时想象我们想要在五秒之内每秒都打印一个信息。代码就会是这样的:
setTimeout(function() {
console.log(1);
setTimeout(function() {
console.log(2);
setTimeout(function() {
console.log(3);
setTimeout(function() {
console.log(4);
setTimeout(function() {
console.log(5);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
}, 1000);
以这种方式使用多个嵌套回调的异步JavaScript既容易出错又难以维护。它通常被称为回调地狱,甚至有自己的网页。
当然,这是一个臆造的例子,但它有助于说明问题。在实际场景中,我们可能会进行Ajax调用,用结果更新DOM,然后等待动画完成。或者,我们的服务器可能从客户端接收输入,验证输入,更新数据库,写入日志文件,最后发送响应。在这两种情况下,我们还需要处理发生的任何错误。
使用嵌套回调来完成这样的任务是非常痛苦的。幸运的是,Promise为我们提供了一种更简洁的语法,使我们能够将异步命令串联起来,让它们一个接一个地运行。
创建Promise的基本语法如下:
const promise = new Promise((resolve, reject) => {
//asynchronous code goes here
});
首先,我们使用Promise
构造函数实例化一个新的Promise对象,并传递给它一个回调函数。回调接收两个参数:resolve
和reject
,它们都是函数。我们所有的异步代码都在回调函数中。
如果一切运行成功,则通过调用 resolve
来实现Promise。如果出现错误,则调用 reject
拒绝Promise。我们可以向这两个方法传递值,这些值将在消费代码中可用。
要了解这在实践中是如何工作的,请参考下面的代码。该代码向web服务发出异步请求,以 JSON 格式返回一个随机的笑话:
const promise = new Promise((resolve, reject) => {
const request = new XMLHttpRequest();
request.open('GET', '<https://icanhazdadjoke.com/>');
request.setRequestHeader('Accept', 'application/json');
request.onload = () => {
if (request.status === 200) {
resolve(request.response); // we got data here, so resolve the Promise
} else {
reject(Error(request.statusText)); // status is not 200 OK, so reject
}
};
request.onerror = () => {
reject(Error('Error fetching data.')); // error occurred, reject the Promise
};
request.send(); // send the request
});
我们首先使用Promise
构造函数创建一个新的Promise对象。该构造函数用于封装尚未支持Promise的函数或API,例如上面的XMLHttpRequest
对象。传递给Promise构造函数的回调包含用于从远程服务获取数据的异步代码。(注意,我们在这里使用的是箭头函数)在回调中,我们向 https://icanhazdadjoke.com/ 创建了一个 Ajax 请求,该请求以 JSON 格式返回一个随机的笑话。
当从远程服务器收到成功的响应时,会传递给resolve
方法。如果发生任何错误(无论是在服务器上还是在网络层),reject
方法将调用一个Error
对象。
当我们实例化一个Promise对象时,我们将得到一个未来可用数据的代理。在我们的例子中,我们期待从远程服务返回一些数据。那么,我们如何知道数据何时可用呢?这就是使用Promise.then()
函数的地方:
const promise = new Promise((resolve, reject) => { ... });
promise.then((data) => {
console.log('Got data! Promise fulfilled.');
document.body.textContent = JSON.parse(data).joke;
}, (error) => {
console.error('Promise rejected.');
console.error(error.message);
});
该函数可以接受两个参数:成功回调和失败回调。这些回调将在Promise解决(即fulfilled
或rejected
)时调用。如果Promise实现,成功回调将使用我们传递给resolve
的实际数据触发。如果Promise被拒绝,失败回调将被调用。无论我们传递给reject
的是什么,都将作为参数传递给该回调。
在上面代码中,我们可以通过调用resolve
和reject
方法来改变Promise的状态。在继续之前,花点时间看下Promise的生命周期。
Promise的状态会是下面值的其中一种:
Promise开始时处于pending
的状态。这意味着它既没有fulfilled
也没有rejected
。如果与Promise相关的操作成功(在我们的示例中是远程 API 调用),并且调用了 resolve
方法,那么Promise称为fulfilled
。另一方面,如果相关操作不成功,且 reject
方法被调用,则该Promise处于rejected
状态。最后,如果Promise处于fulfilled
或rejected
状态,但不是pending
状态,则称为settled
。
一旦Promise是rejected
或者fulfilled
,该状态将永久与之关联。这意味着Promise只能成功或失败一次。如果Promise已经fulfilled
,并且在其后附加有两个回调的then()
,那么成功回调会直接被调用。因此,在Promise的世界里,我们不关心Promise何时settled
。我们只关心Promise的最终结果。
有时可能需要将多个异步任务按照特定顺序链在一起。这就是所谓的Promise链式调用。让我们重温一下 setTimeout
示例,以了解Promise链式调用的基本工作原理。
我们可以像以前一样,首先创建一个新的Promise对象:
const promise = new Promise((resolve, reject) => {
setTimeout(() => { resolve() }, 1000)
});
promise.then(() => {
console.log(1);
});
不出所料,Promise在一秒后被执行,控制台打印"1"。
为了继续链式调用,我们需要在控制台语句后返回第二个Promise,并将其传递给第二个then
:
const promise = new Promise((resolve, reject) => {
setTimeout(() => { resolve() }, 1000)
});
promise.then(() => {
console.log(1);
return new Promise((resolve, reject) => {
setTimeout(() => { resolve() }, 1000)
});
}).then(() => {
console.log(2);
});
虽然这个方法可行,但它已经开始变得有点笨重。让我们创建一个返回新Promise的函数,并在特定时间后解析该Promise:
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
然后,我们可以使用它来扁平化嵌套代码:
sleep(1000)
.then(() => {
console.log(1);
return sleep(1000);
}).then(() => {
console.log(2);
return sleep(1000);
}).then(() => {
console.log(3);
return sleep(1000);
})
...
由于 then
方法本身返回一个 Promise 对象,并且我们不会从一个异步操作传递任何值到下一个异步操作,这使得我们能够进一步简化事情:
sleep(1000)
.then(() => console.log(1))
.then(() => sleep(1000))
.then(() => console.log(2))
.then(() => sleep(1000))
.then(() => console.log(3))
...
这比原始代码要优雅得多。
请注意,如果你想了解更多有关使用JavaScript实现一个sleep函数,你可能对这篇文章感兴趣。
当我们需要执行多个异步操作时,我们可能希望将一个异步调用的结果传递给Promise链中的下一个then
,这样我们就可以对该数据进行处理。
例如,我们可能想要获取 GitHub 仓库的贡献者列表,然后使用该信息获取第一位贡献者的姓名:
fetch('<https://api.github.com/repos/eslint/eslint/contributors>')
.then(res => res.json())
.then(json => {
const firstContributor = json[0].login;
return fetch(`https://api.github.com/users/${firstContributor}`)
})
.then(res => res.json())
.then(json => console.log(`The first contributor to ESLint was ${json.name}`));
// The first contributor to ESLint was Nicholas C. Zakas
正如我们看到的,通过返回从第二个 fetch
调用返回的Promise,服务器的响应 (res
) 在下面的 then
中可用。
我们已经知道,then函数接收两个回调函数作为参数,并且如果Promise被拒绝,第二个参数会被调用:
promise.then((data) => {
console.log('Got data! Promise fulfilled.');
...
}, (error) => {
console.error('Promise rejected.');
console.error(error.message);
});
然而,为每个Promise指定错误处理函数是相当繁琐的,尤其是处理Promise链式调用的时候。幸运的是,还有更好的方式。
我们还可以使用catch
方法,它可以为我们处理错误。当一个Promise在Promise链的任何地方rejected
时,控制会跳转到最近的拒绝处理函数中。这非常方便,因为它意味着我们可以在链的末尾添加一个catch
,让它来处理发生的任何错误。
让我们以前面的代码为例:
fetch('<https://api.github.com/repos/eslint/eslint/contributors>')
.then(res => res.json())
.then(json => {
const firstContributor = json[0].login;
return fetch(`https://api.github.com/users/${firstContributor}`)
})
.then(res => res.jsn())
.then(json => console.log(`The top contributor to ESLint wass ${json.name}`))
.catch(error => console.log(error));
注意,除了在代码块的末尾添加错误处理函数之外,我还在第7行将res.json()
拼错为res.jsn()
。
现在运行代码,会在屏幕上看到下面的输出:
TypeError: res.jsn is not a function
<anonymous> <http://0.0.0.0:8000/index.js:7>
promise callback* <http://0.0.0.0:8000/index.js:7>
index.js:9:27
我正在运行的文件名为index.js
。第7行包含错误,第9行是捕获错误的catch
块。
Promise.finally
方法在Promise settled
后运行,也就是resolved
或者rejected
。与catch
一样,该方法有助于防止代码重复,并且在执行清理任务时非常有用,例如关闭数据库连接或从UI中移除加载动画。
下面是一个使用我们之前代码的示例:
function getFirstContributor(org, repo) {
showLoadingSpinner();
fetch(`https://api.github.com/repos/${org}/${repo}/contributors`)
.then(res => res.json())
.then(json => {
const firstContributor = json[0].login;
return fetch(`https://api.github.com/users/${firstContributor}`)
})
.then(res => res.json())
.then(json => console.log(`The first contributor to ${repo} was ${json.name}`))
.catch(error => console.log(error))
.finally(() => hideLoadingSpinner());
};
getFirstContributor('facebook', 'react');
它不接收任何参数并返回一个Promise,因此我们可以在它的返回值上链式调用更多的then
、catch
和finally
调用。
到此为止,我们已经对JavaScript Promise有了一个很好的基本了解,但在结束之前,我们需要注意各种Promise实用方法。
在前面的示例中,我们需要在第一个 Ajax 调用完成后才能进行第二个 Ajax 调用。与此不同的是,有时我们会有一堆完全不相互依赖的异步操作。这时就需要使用 Promise.all
。
该方法接收一个Promise数组,等待所有Promise resolved
或其中任何一个Promise rejected
。如果所有的Promise都成功resolved
,all
实现一个数组,该数组包含各个Promise的履行值:
Promise.all([
new Promise((resolve, reject) => setTimeout(() => resolve(1), 0)),
new Promise((resolve, reject) => setTimeout(() => resolve(2), 1500)),
new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)),
])
.then(values => console.log(values))
.catch(err => console.error(err));
上述代码会在三秒后在控制台打印[1, 2, 3]
。
然而,如果任何Promise rejected
,all
将拒绝该Promise的值,而不会考虑任何其他Promise。
不像all
,Promise.allSettled
将等待传递给它的每一个Promise的实现或拒绝。如果一个Promise被拒绝,它不会停止执行:
Promise.allSettled([
new Promise((resolve, reject) => setTimeout(() => resolve(1), 0)),
new Promise((resolve, reject) => setTimeout(() => reject(2), 1500)),
new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)),
])
.then(values => console.log(values))
.catch(err => console.error(err));
这将返回状态和值(如果fulfilled
)或者原因(如果rejected
)的列表:
[
{ status: "fulfilled", value: 1 },
{ status: "rejected", reason: 2 },
{ status: "fulfilled", value: 3 },
]
Promise.any()
返回第一个状态为fulfilled
的Promise的值。如果有任何Promise rejected
,都会被忽略:
Promise.any([
new Promise((resolve, reject) => setTimeout(() => reject(1), 0)),
new Promise((resolve, reject) => setTimeout(() => resolve(2), 1500)),
new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)),
])
.then(values => console.log(values))
.catch(err => console.error(err));
在1.5秒后,控制台会打印"2"。
Promise.race
也接收一个Promise数组,并(像上面列出的其他方法一样)返回一个新的Promise。只要它接收到的一个Promise实现或者拒绝,race
本身就会使用刚刚settled
的Promise的值或原因来实现或拒绝:
Promise.race([
new Promise((resolve, reject) => setTimeout(() => reject('Rejected with 1'), 0)),
new Promise((resolve, reject) => setTimeout(() => resolve(2), 1500)),
new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)),
])
.then(values => console.log(values))
.catch(err => console.error(err));
这会在控制台打印”Rejected with 1”,因为数组中的第一个Promise会被立即拒绝,并且拒绝会被我们的catch
块捕获。
我们可以这么改:
Promise.race([
new Promise((resolve, reject) => setTimeout(() => resolve('Resolved with 1'), 0)),
new Promise((resolve, reject) => setTimeout(() => resolve(2), 1500)),
new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)),
])
.then(values => console.log(values))
.catch(err => console.error(err));
这会在控制台打印”Resolved with 1”。
这两个例子中,其他两个Promise都会被忽略。
到目前为止,我们已经了解了回调和Promise,但值得一提的还有较新的async ... await
语法。虽然它实际上只是Promise之上的语法糖,但在很多情况下,它可以让基于Promise的代码更容易阅读和理解。
例如,我们可以这样重写之前的代码:
async function getFirstContributor(org, repo) {
showLoadingSpinner();
try {
const res1 = await fetch(`https://apiy.github.com/repos/${org}/${repo}/contributors`);
const contributors = await res1.json();
const firstContributor = contributors[0].login;
const res2 = await fetch(`https://api.github.com/users/${firstContributor}`)
const details = await res2.json();
console.log(`The first contributor to ${repo} was ${details.name}`);
} catch (error) {
console.error(error)
} finally {
hideLoadingSpinner();
}
}
getFirstContributor('facebook', 'react');
正如我们所看到的,我们使用try ... catch
语法来处理错误,并且我们可以在finally
块中进行任何修整。
我发现上述代码比基于Promise的版本更容易解析。不过,我鼓励你熟悉async ... await
语法,看看哪种最适合你。
在本文中,我们了解了如何创建和使用 JavaScript Promise。我们学习了如何创建一个Promise链,并将数据从一个异步操作传递到下一个异步操作。我们还研究了错误处理以及各种Promise实用方法。
如上所述,下一步应该是开始学习async ...await
,加深对JavaScript程序内部流程控制的理解。
以上就是本文的全部内容。如果对你有所帮助,欢迎点赞、收藏、转发~
手机扫一扫
移动阅读更方便
你可能感兴趣的文章