JavaScript异步编程大冒险: Async/Await

Async/Await 是什么?

Async/Await 也就是大家知道的异步函数，它是一个用来控制 JavaScript 异步流程的一个记号。而在很多现代浏览器上也曾实现过这样的设想。它的灵感来源于C# 和 F#，现在 Async/Await 在ES2017已经平稳着陆。

通常我们认为 async function 是一个能返回 Promise 的 function 。你也可以在 async function 使用 await 关键字。 await 关键字可以放在一个需要返回Promise的表达式前，所得到的值被从Promise里面剥离开，以便能用更直观的同步体验。我们来看一下实际的代码更直观。

// 这是一个简单的返回 Promise 函数

// 功能是在两秒以后 resolve("MESSAGE") .

function getMessage() {

return new Promise((resolve, reject) => {

setTimeout(() => resolve("MESSAGE"), 2000);

});

}

async function start() {

const message = await getMessage();

return <code>The message is: ${message}</code>;

start().then(msg =&gt; console.log(msg));

// "The message is: MESSAGE"

为什么要用 Async/Await?

Async/Await 提供了一个看起来相对同步的方法来执行异步代码。同时也提供了一种简洁而直观的方法来处理异步的错误，因为它实现了try…catch 标记，这是JavaScript里面最常见的一种同步模式。

在我们开始冒险之前，我们应该清楚，Async/Await 是建立在 JavaScript Promises 上的，而且关于它的知识是很重要的。

关于记号

Async 函数

要创建一个 async 函数，一般就要把 async 关键字放在声明函数之前，就像这样：

async function fetchWrapper() {

return fetch('/api/url/');

const fetchWrapper = async () =&gt; fetch('/api/url/');

const obj = {

async fetchWrapper() {

// ...

Await 关键字

async function updateBlogPost(postId, modifiedPost) {

const oldPost = await getPost(postId);

const updatedPost = { ...oldPost, ...modifiedPost };

const savedPost = await savePost(updatedPost);

return savedPost;

在这里的 await 是用在其他返回 promise 的函数前。在第一行，oldPost被赋值为getPost执行resolve后返回的value。在下一行，我们使用了解构赋值来演示怎样把 oldPost 和 modifiedPost 合并。最终我们把 post 储存下来，返回了 savedPost 的结果。

示例 / FAQ

本文转自 沉迷学习中 51CTO博客，原文链接：http://blog.51cto.com/12907581/2052808，如需转载请自行联系原作者