通过一些例子深入了解 JavaScript 的 Async 和 Await #5832

xionglong58 · 2019-05-22T06:26:34Z

译文翻译完成，resolve #5732

本文三人校对

JaxNext · 2019-05-22T07:15:12Z

认领校对。

fanyijihua · 2019-05-22T07:15:13Z

@baddyo 好的呢 🍺

lebenito030 · 2019-05-22T12:25:16Z

校对认领

fanyijihua · 2019-05-22T12:25:18Z

@Mcskiller 妥妥哒 🍻

JaxNext

校对完成。@leviding @xionglong58
翻译得很到位，译者对知识点得理解很透彻。
辛苦了。

JaxNext · 2019-05-22T08:40:17Z

TODO1/understanding-javascript-async-and-await-with-examples.md


 ![](https://cdn-images-1.medium.com/max/3840/1*3kAwfTZXxNynBOB5O6VQtg.jpeg)

-In the beginning, there were callbacks. **A callback is nothing special but a function that is executed at some later time.** Due to JavScript’s asynchronous nature, a callback is required in many places, where the results are not available immediately.
+  首先来了解下回调函数。**回调函数会在被调用后的某一时刻执行，除此之外与其他普通函数并无差别。**由于 JS 的异步特征，在一些不能立即获得函数返回值的地方都需要使用回调函数。


【首先来了解下回调函数。】=>【首先来了解一下回调函数。】

句首多个两个空格。

JaxNext · 2019-05-22T08:42:30Z

TODO1/understanding-javascript-async-and-await-with-examples.md


 ![](https://cdn-images-1.medium.com/max/3840/1*3kAwfTZXxNynBOB5O6VQtg.jpeg)

-In the beginning, there were callbacks. **A callback is nothing special but a function that is executed at some later time.** Due to JavScript’s asynchronous nature, a callback is required in many places, where the results are not available immediately.
+  首先来了解下回调函数。**回调函数会在被调用后的某一时刻执行，除此之外与其他普通函数并无差别。**由于 JS 的异步特征，在一些不能立即获得函数返回值的地方都需要使用回调函数。


【由于 JS 的异步特征，】=>【由于 JavaScript 的异步特征，】

JaxNext · 2019-05-22T08:43:17Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-Here’s an example of reading a file in Node.js (asynchronously) —
+下面是一个 Node.js 读取文件时的示例（异步操作）—


【读取文件时的示例】=>【读取文件的示例】

JaxNext · 2019-05-22T08:43:42Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-Here’s an example of reading a file in Node.js (asynchronously) —
+下面是一个 Node.js 读取文件时的示例（异步操作）—


【—】=>【——】

[下面是一个 Node.js 读取文件时的示例]=>[下面是一个使用 Node.js 读取文件时的示例]

JaxNext · 2019-05-22T08:45:06Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -21,65 +21,64 @@ fs.readFile(__filename, 'utf-8', (err, data) => {
  console.log(data);
 });
 ```
+但当我们要处理多重异步操作时问题就会凸显出来。假设有下面的应用场景（其中的所有操作都是异步的）—


【—】=>【——】

JaxNext · 2019-05-22T14:56:26Z

TODO1/understanding-javascript-async-and-await-with-examples.md

-Note the `async` in the callback to the `.map`. We might expect that `counts` variable will contain the numbers of repos. However, as we have seen earlier, **all async functions return promises.** Hence, `counts` is actually **an array of promises.** `.map` calls the anonymous callback with every `username`, and a promise is returned with every invocation which `.map` keeps in the resulting array.
-
-### Too sequential using await
+注意 `async` 在 `.map`方法中。我们可能希望变量 `counts` 存储着的公开仓库数量。但是，就如我们之前所见，**所有的 async 函数均返回 promise 对象。** 因此，`counts` 实际上是一个**promise 对象数组。** `.map` 为每一个 `username` 调用异步函数，`.map` 方法将每次调用返回的 promise 结果保存在数组中。


【实际上是一个promise 对象数组。 】=>【实际上是一个 promise 对象数组。】

“一个”后面应添加一个空格；
句末多了个空格。

JaxNext · 2019-05-22T14:57:06Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-We may also think of a solution such as —
+我们可能也会有其它解决方法，比如 —


【比如 —】=>【比如 ——】

JaxNext · 2019-05-22T15:00:19Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -431,11 +427,11 @@ async function fetchAllCounts(users) {
 }
 ```

-We are manually fetching each count, and appending them in the `counts` array. The **problem with this code** is that until the first username’s count is fetched, **the next will not start.** At a time, **only one repo count** is fetched.
+我们手动获取了每一个 count，并将它们 append 到 `counts` 数组中。**程序的问题在于**第一个用户的 count 被获取之后，第二个用户的 count 才能被获取。同一时间，只有一个**公开仓库数量**可以被获取。


【并将它们 append 到】=>【并将它们添加到】

JaxNext · 2019-05-22T15:00:55Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-If a single fetch takes 300 ms, then `fetchAllCounts` will take ~900ms for 3 users. As we can see that time usage will linearly grow with user counts. Since the **fetching of repo counts is not co-dependent**, we can **parallelize the operation.**
+如果一个 fetch 操作耗时 300 ms，那么 `fetchAllCounts` 函数耗时大概在 900ms 左右。由此可见，程序耗时会随着用户数量的增加而线性增加。因为**获取不同用户公开仓库数量之间没有依赖**，我们可以将**操作并行处理。**


【大概在 900ms 左右。】=>【大概在 900 ms 左右。】

JaxNext · 2019-05-22T15:05:09Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -447,11 +443,11 @@ async function fetchAllCounts(users) {
 }
 ```

-`Promise.all` receives an array of promises as input and returns a promise as output. The returned promise resolves with **an array of all promise resolutions or rejects with the first rejection.** However, it may not be feasible to start all promises at the same time. Maybe you want to complete promises in batches. You can look at **[p-map](https://github.com/sindresorhus/p-map)** for limited concurrency.
+`Promise.all` 接受一个 promise 对象数组作为输入，返回一个 promise 对象。当所有 promise 对象的状态都转变成 resolved 时，返回值为**所有 promise 对应返回值组成的 promise 数组**，只要有一个 promise 对象被 rejected，`Promise.all` 的返回值为**第一个被 rejected 的 promise 对象对应的返回值。**** 但是，同时运行所有 promise 的操作可能行不通。可能你想批量执行 promise。你可以考虑下使用 **[p-map](https://github.com/sindresorhus/p-map)** 实现受限的并发。


【第一个被 rejected 的 promise 对象对应的返回值。** 】=>【第一个被 rejected 的 promise 对象对应的返回值。】

去掉句末的两个星号和一个空格。

fireairforce

随便提了点意见

fireairforce · 2019-05-23T02:00:37Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-Here’s an example of reading a file in Node.js (asynchronously) —
+下面是一个 Node.js 读取文件时的示例（异步操作）—


[下面是一个 Node.js 读取文件时的示例]=>[下面是一个使用 Node.js 读取文件时的示例]

fireairforce · 2019-05-23T02:03:03Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -21,65 +21,64 @@ fs.readFile(__filename, 'utf-8', (err, data) => {
  console.log(data);
 });
 ```
+但当我们要处理多重异步操作时问题就会凸显出来。假设有下面的应用场景（其中的所有操作都是异步的）—


这段话上面有个换行

fireairforce · 2019-05-23T02:06:54Z

TODO1/understanding-javascript-async-and-await-with-examples.md

-* The code becomes harder to read as one has to move from left to right to understand.
-* Error handling is complicated and often leads to bad code.
+* 不得不从左至右去理解代码，使得代码变得更难以阅读。
+* 处理错误变得更加复杂，并且容易引发错误代码。


[处理错误]=>[错误处理]

fireairforce · 2019-05-23T02:10:23Z

TODO1/understanding-javascript-async-and-await-with-examples.md


 ![Using Promises](https://cdn-images-1.medium.com/max/2000/1*RMxmAiwD-QFKspkHx_nKmA.png)

-The flow has become a familiar **top-to-bottom** rather than **left-to-right** as in callbacks, which is a plus. However, Promises still suffer from some problems —
+回调流程变成熟悉的**自上而下**，而不是**从左至右**，这是一个优点。但是 promise 仍然有一些缺点 —


[回调流程变成熟悉的自上而下，而不是从左至右，这是一个优点。]=>[回调流程由从左至右结构变成我们所熟悉的自上而下的结构，这是一个优点]

fireairforce · 2019-05-23T02:12:14Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-**Let’s assume that we have a `for` loop that prints 0 to 10 at random intervals (0 to n seconds). We need to modify it using promises to print sequentially 0 to 10. For example, if 0 takes 6 seconds to print and 1 takes two seconds to print, then 1 should wait for 0 to print and so on.**
+**假设要在 for 循环中以任意时间间隔（0 到 n 秒）输出数字 0 到 10。我们将使用 promise 去顺序打印 0 到 10，比如打印 0 需要 6 秒，打印 1 要延迟 2 秒，而 1 需要 0 打印完成之后才能打印，其它数字打印过程也类似。** 


[for]=>[for]

fireairforce · 2019-05-23T02:17:36Z

TODO1/understanding-javascript-async-and-await-with-examples.md

+* **注意到 async 函数是基于 promise 的这一点很重要。**
+* async/await 并不是完全全新的概念。
+* async/await 可以被理解为基于 promise 实现异步方案的一种替代方案。
+* 我们可以使用 async/await 来避免使用**链式调用 promise**。


[我们可以使用 async/await 来避免使用链式调用 promise。]=>[我们可以使用 async/await 来避免链式调用 promise。]

fireairforce · 2019-05-23T02:18:35Z

TODO1/understanding-javascript-async-and-await-with-examples.md

+* async/await 并不是完全全新的概念。
+* async/await 可以被理解为基于 promise 实现异步方案的一种替代方案。
+* 我们可以使用 async/await 来避免使用**链式调用 promise**。
+* async/await 允许代码异步执行的同时**保持正常的**、同步式的**感觉**。


[保持正常的]=>[保持正常]

fireairforce · 2019-05-23T02:19:40Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-They consist of two main keywords- async and await. **`async` is used to make a function asynchronous.** It **unlocks** the use of `await` inside these functions. Using `await` in any other case is a syntax error.
+async/await 包含两个关键字 async 和 await。**`async` 用来使得函数可以异步执行。`async` 使得在函数中可以使用 `await` 关键字，除此之外，在任何地方使用 `awiait` 都属于语法错误。


async 用来使得函数可以异步执行。=> async 用来让函数可以异步执行。

fireairforce · 2019-05-23T02:20:28Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-They consist of two main keywords- async and await. **`async` is used to make a function asynchronous.** It **unlocks** the use of `await` inside these functions. Using `await` in any other case is a syntax error.
+async/await 包含两个关键字 async 和 await。**`async` 用来使得函数可以异步执行。`async` 使得在函数中可以使用 `await` 关键字，除此之外，在任何地方使用 `awiait` 都属于语法错误。


[在任何地方使用 awiait 都属于语法错误] 这句话中await拼写错误

fireairforce · 2019-05-23T02:24:11Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -129,9 +128,9 @@ fn().then(console.log)
 // hello
 ```

-The function `fn` returns `'hello'`. Because we have used `async`, the return value `'hello'` is **wrapped in a promise** (via `Promise.resolve`).
+函数 `fn` 返回值 `'hello'`，由于我们使用了 `async` 关键字，返回值 `'hello'` 是**一个新的 promise 对象**（通过 `Promise.resolve` 实现）。


函数 fn 返回值 'hello'　＝》　函数 fn 返回值是 'hello'

fireairforce · 2019-05-23T03:38:27Z

校对认领

fireairforce · 2019-05-23T03:40:51Z

校对认领

哈哈哈，原来已经有两个人啦,算啦= = ，打扰啦，我看见这篇文章内容有意思就过来帮了点忙

leviding · 2019-05-23T04:24:16Z

@fireairforce 可以的，算一个吧

感谢校对者，修改了很多格式问题

lebenito030

翻译得很不错，就是有一些格式需要调整一下（最后那个问题不知道是我这边的问题还是什么）
辛苦了_(:з)∠)_

lebenito030 · 2019-05-23T08:56:28Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-* The code becomes harder to read as one has to move from left to right to understand.
-* Error handling is complicated and often leads to bad code.
+为了解决上述问题，JS 提出了 [**Promise**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。**现在，我们可以使用链式结构取代回调函数嵌套的结构。**下面是一个例子 ——


『为了解决上述问题，JS 提出』=>『为了解决上述问题，JavaScript 提出』
上面都改了，和上面的保持一致吧

lebenito030 · 2019-05-23T08:57:50Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-![Using Promises](https://cdn-images-1.medium.com/max/2000/1*RMxmAiwD-QFKspkHx_nKmA.png)
+回调流程由**从左至右**结构变成我们所熟悉的**自上而下**的结构，这是一个优点，这是一个优点。但是 promise 仍然有一些缺点 ——


『这是一个优点，这是一个优点。』=>『这是一个优点。』
这里好像重复了

lebenito030 · 2019-05-23T09:08:53Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-### An async function always returns a promise.
+### 一个 async 函数总是返回 promise。


『一个 async 函数总是返回 promise』=>『一个 async 函数总是返回一个 promise 对象』
感觉这样翻合理些

lebenito030 · 2019-05-23T09:23:02Z

TODO1/understanding-javascript-async-and-await-with-examples.md

 fn().then(console.log);
 ```

-Let’s examine the function `fn` line by line —
+让我们来逐行检验函数 `fn` —


『让我们来逐行检验函数 fn —』=>『让我们来逐行检验函数 fn ——』

lebenito030 · 2019-05-23T09:25:53Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-* `c` gets the value of `5` similarly and we delay for 1 second again using `await delayAndGetRandom(1000)`. We don’t use the resolved value in this case.
+* 相似的，变量 `c` 值为 `5` ，然后使用 `await delayAndGetRandom(1000)` 又延时了 1 秒钟。在这个例子中我们并没有使用 `Promise.resolve` 返回值。


『相似的』=>『同样』

lebenito030 · 2019-05-23T10:40:18Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -328,18 +326,17 @@ async function foo() {
 }
 ```

-Note that **we are returning** (and not awaiting) `canRejectOrReturn` from `foo` this time. `foo` will either **resolve with `'perfect number'`** or **reject with** Error('Sorry, number too big'). **The `catch` block will never be executed.**
+注意这一次我们使用了 **return** （而不是 await）将函数`canRejectOrReturn` 从 `foo` 函数中返回。`foo` 函数运行结果是 **resolved，返回值为`'perfect number'` **或者值为 Error('Sorry, number too big')。**`catch` 代码块永远都不会被执行。**


『将函数canRejectOrReturn』=>『将函数 canRejectOrReturn』
英文和中文之间添加空格

lebenito030 · 2019-05-23T10:42:25Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -314,9 +312,9 @@ async function foo() {
 }
 ```

-Since we are awaiting `canRejectOrReturn`, **its own rejection will be turned into a throw** and the `catch` block will execute. That is, `foo` will **either resolve with** `undefined` (because we are not returning anything in `try`) or **it will resolve with** `'error caught'`. It will never reject since we used a `try-catch` block to handle the error in the `foo` function itself.
+因为我们在等待执行 `canRejectOrReturn` 函数的时候, **canRejectOrReturn 函数体内的 promise 会转移到 rejected 状态而抛出错误**，这将导致 `catch` 代码块被执行。也就是说 `foo` 函数运行结果为 `rejected`，返回值为 `undefined`（因为我们在 `try` 中没有返回值）或者 'error caught'`。因为我们在 `foo` 函数中使用了 `try-catch` 处理错误，所以说 `foo` 函数的结果永远不会是 rejected。


『或者 'error caught'』=>『或者 'error caught'。』
代码块的样式少了一个`，渲染出来是错的

lebenito030 · 2019-05-23T10:44:04Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -328,18 +326,17 @@ async function foo() {
 }
 ```

-Note that **we are returning** (and not awaiting) `canRejectOrReturn` from `foo` this time. `foo` will either **resolve with `'perfect number'`** or **reject with** Error('Sorry, number too big'). **The `catch` block will never be executed.**
+注意这一次我们使用了 **return** （而不是 await）将函数`canRejectOrReturn` 从 `foo` 函数中返回。`foo` 函数运行结果是 **resolved，返回值为`'perfect number'` **或者值为 Error('Sorry, number too big')。**`catch` 代码块永远都不会被执行。**


『返回值为'perfect number'』=>『返回值为 'perfect number'』
中英文之间添加空格

lebenito030 · 2019-05-23T10:45:54Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -351,9 +348,9 @@ async function foo() {
 }
 ```

-In this case, `foo` **resolves with either** `'perfect number'` or **resolve with** `'error caught'`. **There is no rejection.** It is like the first example above with just `await`. Except, we **resolve with the value that** `canRejectOrReturn` produces rather than `undefined`.
+在上面的例子中，`foo` 函数**运行结果为 resolved，**返回值为 'perfect number'` 或 `'error caught'`。 **`foo` 函数的结果永远不会是 rejected。** 这就像上面那个只有 `await` 的例子。只是这里将函数 `canRejectOrReturn` 的 rejected 结果返回了，而不是返回了 `undefined`。


『返回值为 'perfect number' 』=>『返回值为 'perfect number' 』
这里也少了一个 ` 符号，导致后面的样式渲染乱了

lebenito030 · 2019-05-23T10:57:53Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -447,11 +442,11 @@ async function fetchAllCounts(users) {
 }
 ```

-`Promise.all` receives an array of promises as input and returns a promise as output. The returned promise resolves with **an array of all promise resolutions or rejects with the first rejection.** However, it may not be feasible to start all promises at the same time. Maybe you want to complete promises in batches. You can look at **[p-map](https://github.com/sindresorhus/p-map)** for limited concurrency.
+`Promise.all` 接受一个 promise 对象数组作为输入，返回一个 promise 对象。当所有 promise 对象的状态都转变成 resolved 时，返回值为**所有 promise 对应返回值组成的 promise 数组**，只要有一个 promise 对象被 rejected，`Promise.all` 的返回值为**第一个被 rejected 的 promise 对象对应的返回值。**但是，同时运行所有 promise 的操作可能行不通。可能你想批量执行 promise。你可以考虑下使用 **[p-map](https://github.com/sindresorhus/p-map)** 实现受限的并发。


『返回值为**第一个被 rejected 的 promise 对象对应的返回值。**但是』
这里不知道为什么没有渲染出来（用 view file 查看原文的时候是这个样子），不知道你们看是不是

lebenito030 · 2019-05-23T11:00:25Z

@leviding @xionglong58 校对完成

修改完成，感谢大家

fireairforce · 2019-05-24T14:47:44Z

TODO1/understanding-javascript-async-and-await-with-examples.md


 const obj = {
-  async getName() {


请问这个地方是误删了一行代码吗

确认了一下，应该是误删

leviding · 2019-05-25T04:02:10Z

TODO1/understanding-javascript-async-and-await-with-examples.md


 ![](https://cdn-images-1.medium.com/max/3840/1*3kAwfTZXxNynBOB5O6VQtg.jpeg)

-In the beginning, there were callbacks. **A callback is nothing special but a function that is executed at some later time.** Due to JavScript’s asynchronous nature, a callback is required in many places, where the results are not available immediately.
+首先来了解下回调函数。**回调函数会在被调用后的某一时刻执行，除此之外与其他普通函数并无差别。**由于 JavaScript 的异步特征，在一些不能立即获得函数返回值的地方都需要使用回调函数。


Suggested change

首先来了解下回调函数。**回调函数会在被调用后的某一时刻执行，除此之外与其他普通函数并无差别。**由于 JavaScript 的异步特征，在一些不能立即获得函数返回值的地方都需要使用回调函数。

首先来了解下回调函数。**回调函数会在被调用后的某一时刻执行，除此之外与其他普通函数并无差别**。由于 JavaScript 的异步特征，在一些不能立即获得函数返回值的地方都需要使用回调函数。

leviding · 2019-05-25T04:02:38Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-![Example of Callback hell.](https://cdn-images-1.medium.com/max/2000/1*uYstZyc0A4ZSO2Xxh-ASIg.png)
+**注意回调函数的嵌套和程序末尾** `})` **的层级。** 鉴于结构上的相似性，这种方式被形象地称作[**回调地狱**](http://callbackhell.com/)或[**回调金字塔**](https://en.wikipedia.org/wiki/Pyramid_of_doom_(programming))。这种方式的一些缺点是 ——


Suggested change

**注意回调函数的嵌套和程序末尾** `})` **的层级。** 鉴于结构上的相似性，这种方式被形象地称作[**回调地狱**](http://callbackhell.com/)或[**回调金字塔**](https://en.wikipedia.org/wiki/Pyramid_of_doom_(programming))。这种方式的一些缺点是 ——

**注意回调函数的嵌套和程序末尾** `})` **的层级**。鉴于结构上的相似性，这种方式被形象地称作[**回调地狱**](http://callbackhell.com/)或[**回调金字塔**](https://en.wikipedia.org/wiki/Pyramid_of_doom_(programming))。这种方式的一些缺点是 ——

leviding · 2019-05-25T04:02:52Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-* The code becomes harder to read as one has to move from left to right to understand.
-* Error handling is complicated and often leads to bad code.
+为了解决上述问题，JavaScript 提出了 [**Promise**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。**现在，我们可以使用链式结构取代回调函数嵌套的结构。**下面是一个例子 ——


Suggested change

为了解决上述问题，JavaScript 提出了 [**Promise**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。**现在，我们可以使用链式结构取代回调函数嵌套的结构。**下面是一个例子 ——

为了解决上述问题，JavaScript 提出了 [**Promise**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)** 。现在，我们可以使用链式结构取代回调函数嵌套的结构。**下面是一个例子 ——

leviding · 2019-05-25T04:04:21Z

TODO1/understanding-javascript-async-and-await-with-examples.md

-### Syntax
-
-They consist of two main keywords- async and await. **`async` is used to make a function asynchronous.** It **unlocks** the use of `await` inside these functions. Using `await` in any other case is a syntax error.
+async/await 包含两个关键字 async 和 await。**`async` 用来使得函数可以异步执行。`async` 使得在函数中可以使用 `await` 关键字，除此之外，在任何地方使用 `await` 都属于语法错误。


Suggested change

async/await 包含两个关键字 async 和 await。**`async` 用来使得函数可以异步执行。`async` 使得在函数中可以使用 `await` 关键字，除此之外，在任何地方使用 `await` 都属于语法错误。

async/await 包含两个关键字 async 和 await。**`async` 用来使得函数可以异步执行**。`async` 使得在函数中可以使用 `await` 关键字，除此之外，在任何地方使用 `await` 都属于语法错误。

leviding · 2019-05-25T04:05:02Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-If the return value is primitive, `Promise.resolve` returns a **promise-wrapped version of the value.** However, when the return value is a promise object, **the same object is returned without any wrapping.**
+如果返回值是一个原始值，`Promise.resolve` 则返回该值的一个 **promise 版本**。 但是，如果返回值是 promise 对象，那么 `Promise.resolve` 将**原封不动地返回这个对象**。


Suggested change

如果返回值是一个原始值，`Promise.resolve` 则返回该值的一个 **promise 版本**。但是，如果返回值是 promise 对象，那么 `Promise.resolve` 将**原封不动地返回这个对象**。

如果返回值是一个原始值，`Promise.resolve` 则返回该值的一个 **promise 版本**。但是，如果返回值是 promise 对象，那么 `Promise.resolve` 将**原封不动地返回这个对象**。

leviding · 2019-05-25T04:06:47Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -300,9 +297,9 @@ return 'perfect number';
 }
 ```

-`canRejectOrReturn()` is an async function and it will either **resolve with** `'perfect number'` or **reject with** Error('Sorry, number too big').
+`canRejectOrReturn()` 是一个 async 函数，他可能返回`'perfect number'` 也可能抛出错误（'Sorry, number too big'）。


Suggested change

`canRejectOrReturn()` 是一个 async 函数，他可能返回`'perfect number'` 也可能抛出错误（'Sorry, number too big'）。

`canRejectOrReturn()` 是一个 async 函数，他可能返回 `'perfect number'` 也可能抛出错误（'Sorry, number too big'）。

leviding · 2019-05-25T04:07:14Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -314,9 +311,9 @@ async function foo() {
 }
 ```

-Since we are awaiting `canRejectOrReturn`, **its own rejection will be turned into a throw** and the `catch` block will execute. That is, `foo` will **either resolve with** `undefined` (because we are not returning anything in `try`) or **it will resolve with** `'error caught'`. It will never reject since we used a `try-catch` block to handle the error in the `foo` function itself.
+因为我们在等待执行 `canRejectOrReturn` 函数的时候, **canRejectOrReturn 函数体内的 promise 会转移到 rejected 状态而抛出错误**，这将导致 `catch` 代码块被执行。也就是说 `foo` 函数运行结果为 `rejected`，返回值为 `undefined`（因为我们在 `try` 中没有返回值）或者 `'error caught'`。因为我们在 `foo` 函数中使用了 `try-catch` 处理错误，所以说 `foo` 函数的结果永远不会是 rejected。


Suggested change

因为我们在等待执行 `canRejectOrReturn` 函数的时候, **canRejectOrReturn 函数体内的 promise 会转移到 rejected 状态而抛出错误**，这将导致 `catch` 代码块被执行。也就是说 `foo` 函数运行结果为 `rejected`，返回值为 `undefined`（因为我们在 `try` 中没有返回值）或者 `'error caught'`。因为我们在 `foo` 函数中使用了 `try-catch` 处理错误，所以说 `foo` 函数的结果永远不会是 rejected。

因为我们在等待执行 `canRejectOrReturn` 函数的时候，**canRejectOrReturn 函数体内的 promise 会转移到 rejected 状态而抛出错误**，这将导致 `catch` 代码块被执行。也就是说 `foo` 函数运行结果为 `rejected`，返回值为 `undefined`（因为我们在 `try` 中没有返回值）或者 `'error caught'`。因为我们在 `foo` 函数中使用了 `try-catch` 处理错误，所以说 `foo` 函数的结果永远不会是 rejected。

leviding · 2019-05-25T04:08:43Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -351,9 +347,9 @@ async function foo() {
 }
 ```

-In this case, `foo` **resolves with either** `'perfect number'` or **resolve with** `'error caught'`. **There is no rejection.** It is like the first example above with just `await`. Except, we **resolve with the value that** `canRejectOrReturn` produces rather than `undefined`.
+在上面的例子中，`foo` 函数**运行结果为 resolved，**返回值为 `'perfect number'` 或 `'error caught'`。 **`foo` 函数的结果永远不会是 rejected。** 这就像上面那个只有 `await` 的例子。只是这里将函数 `canRejectOrReturn` 的 rejected 结果返回了，而不是返回了 `undefined`。


Suggested change

在上面的例子中，`foo` 函数**运行结果为 resolved，**返回值为 `'perfect number'` 或 `'error caught'`。 **`foo` 函数的结果永远不会是 rejected。** 这就像上面那个只有 `await` 的例子。只是这里将函数 `canRejectOrReturn` 的 rejected 结果返回了，而不是返回了 `undefined`。

在上面的例子中，`foo` 函数**运行结果为 resolved**，返回值为 `'perfect number'` 或 `'error caught'`。**`foo` 函数的结果永远不会是 rejected。** 这就像上面那个只有 `await` 的例子。只是这里将函数 `canRejectOrReturn` 的 rejected 结果返回了，而不是返回了 `undefined`。

leviding · 2019-05-25T04:09:11Z

TODO1/understanding-javascript-async-and-await-with-examples.md


-You can break return await canRejectOrReturn(); to see the effect —
+你可以将语句 return await canRejectOrReturn();拆开再看看效果 ——


Suggested change

你可以将语句 return await canRejectOrReturn();拆开再看看效果 ——

你可以将语句 `return await canRejectOrReturn();` 拆开再看看效果 ——

leviding · 2019-05-25T04:10:28Z

TODO1/understanding-javascript-async-and-await-with-examples.md

@@ -412,12 +408,10 @@ const counts = users.map(async username => {
  return count;
 });
 ```
+### 过于按顺序使用 await
+注意 `async` 在 `.map`方法中。我们可能希望变量 `counts` 存储着的公开仓库数量。但是，就如我们之前所见，**所有的 async 函数均返回 promise 对象。** 因此，`counts` 实际上是一个 **promise 对象数组。**`.map` 为每一个 `username` 调用异步函数，`.map` 方法将每次调用返回的 promise 结果保存在数组中。


Suggested change

注意 `async` 在 `.map`方法中。我们可能希望变量 `counts` 存储着的公开仓库数量。但是，就如我们之前所见，**所有的 async 函数均返回 promise 对象。** 因此，`counts` 实际上是一个 **promise 对象数组。**`.map` 为每一个 `username` 调用异步函数，`.map` 方法将每次调用返回的 promise 结果保存在数组中。

注意 `async` 在 `.map`方法中。我们可能希望变量 `counts` 存储着的公开仓库数量。但是，就如我们之前所见，**所有的 async 函数均返回 promise 对象**。因此，`counts` 实际上是一个 **promise 对象数组**。`.map` 为每一个 `username` 调用异步函数，`.map` 方法将每次调用返回的 promise 结果保存在数组中。

leviding · 2019-05-25T04:18:29Z

@xionglong58

格式上还有些细节问题需要修改，我指出了一些，并不一定是所有，请自行检查修改原文，例如我只出了部分加粗格式错误，需要调整。

有一些校对意见没有修改，麻烦确认下是不需要改还是漏掉了。

xionglong58 · 2019-05-27T01:20:40Z

@fanyijihua 修改完成

leviding · 2019-05-27T07:50:07Z

@xionglong58 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

文章发布时，标题前面那个大图，你可以在上传掘金的时候作为题图使用，然后在文中删除那个图就行啦。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

xionglong58 added 9 commits May 8, 2019 13:47

Update understanding-javascript-async-and-await-with-examples.md

1222fb7

Update understanding-javascript-async-and-await-with-examples.md

dda5c0a

Update understanding-javascript-async-and-await-with-examples.md

c7b0c4f

Update understanding-javascript-async-and-await-with-examples.md

25e7c60

Update understanding-javascript-async-and-await-with-examples.md

1c991f1

Update understanding-javascript-async-and-await-with-examples.md

76b8802

Update understanding-javascript-async-and-await-with-examples.md

84064c1

通过一些例子深入了解 JavaScript 的 Async 和 Await

6e57088

Update understanding-javascript-async-and-await-with-examples.md

c99321e

fanyijihua added the 校对认领 label May 22, 2019

fanyijihua added the 正在校对 label May 22, 2019

leviding added the 前端 label May 22, 2019

leviding mentioned this pull request May 22, 2019

通过一些例子深入了解 JavaScript 的 Async 和 Await #5732

Closed

fanyijihua removed the 校对认领 label May 22, 2019

JaxNext reviewed May 22, 2019

View reviewed changes

fireairforce reviewed May 23, 2019

View reviewed changes

Update understanding-javascript-async-and-await-with-examples.md

4b9d070

感谢校对者，修改了很多格式问题

lebenito030 reviewed May 23, 2019

View reviewed changes

leviding added the enhancement 等待译者修改 label May 24, 2019

通过一些例子深入了解 JavaScript 的 Async 和 Await

26ae77e

修改完成，感谢大家

leviding added 标注待管理员 Review and removed enhancement 等待译者修改 labels May 24, 2019

fireairforce reviewed May 24, 2019

View reviewed changes

Update understanding-javascript-async-and-await-with-examples.md

71a95ab

leviding reviewed May 25, 2019

View reviewed changes

Update understanding-javascript-async-and-await-with-examples.md

d17a832

leviding added enhancement 等待译者修改 and removed 标注待管理员 Review labels May 25, 2019

leviding mentioned this pull request May 25, 2019

Update understanding-javascript-async-and-await-with-examples.md sunui/for-robot-test#20

Open

Update understanding-javascript-async-and-await-with-examples.md

bfe190e

leviding added 标注待管理员 Review and removed enhancement 等待译者修改 labels May 27, 2019

leviding added 3 commits May 27, 2019 15:46

Update understanding-javascript-async-and-await-with-examples.md

ab020a3

Update understanding-javascript-async-and-await-with-examples.md

89ae8c5

Update understanding-javascript-async-and-await-with-examples.md

8cd59fc

leviding approved these changes May 27, 2019

View reviewed changes

leviding merged commit 60d87d2 into xitu:master May 27, 2019

leviding added 翻译完成 and removed 标注待管理员 Review 正在校对 labels May 27, 2019


		Here’s an example of reading a file in Node.js (asynchronously) —
		下面是一个 Node.js 读取文件时的示例（异步操作）—


		We may also think of a solution such as —
		我们可能也会有其它解决方法，比如 —


		If a single fetch takes 300 ms, then `fetchAllCounts` will take ~900ms for 3 users. As we can see that time usage will linearly grow with user counts. Since the fetching of repo counts is not co-dependent, we can parallelize the operation.
		如果一个 fetch 操作耗时 300 ms，那么 `fetchAllCounts` 函数耗时大概在 900ms 左右。由此可见，程序耗时会随着用户数量的增加而线性增加。因为获取不同用户公开仓库数量之间没有依赖，我们可以将操作并行处理。


		Let’s assume that we have a `for` loop that prints 0 to 10 at random intervals (0 to n seconds). We need to modify it using promises to print sequentially 0 to 10. For example, if 0 takes 6 seconds to print and 1 takes two seconds to print, then 1 should wait for 0 to print and so on.
		假设要在 for 循环中以任意时间间隔（0 到 n 秒）输出数字 0 到 10。我们将使用 promise 去顺序打印 0 到 10，比如打印 0 需要 6 秒，打印 1 要延迟 2 秒，而 1 需要 0 打印完成之后才能打印，其它数字打印过程也类似。


		They consist of two main keywords- async and await. `async` is used to make a function asynchronous. It unlocks the use of `await` inside these functions. Using `await` in any other case is a syntax error.
		async/await 包含两个关键字 async 和 await。**`async` 用来使得函数可以异步执行。`async` 使得在函数中可以使用 `await` 关键字，除此之外，在任何地方使用 `awiait` 都属于语法错误。


		![Using Promises](https://cdn-images-1.medium.com/max/2000/1*RMxmAiwD-QFKspkHx_nKmA.png)
		回调流程由从左至右结构变成我们所熟悉的自上而下的结构，这是一个优点，这是一个优点。但是 promise 仍然有一些缺点 ——


		### An async function always returns a promise.
		### 一个 async 函数总是返回 promise。


		* `c` gets the value of `5` similarly and we delay for 1 second again using `await delayAndGetRandom(1000)`. We don’t use the resolved value in this case.
		* 相似的，变量 `c` 值为 `5` ，然后使用 `await delayAndGetRandom(1000)` 又延时了 1 秒钟。在这个例子中我们并没有使用 `Promise.resolve` 返回值。

	首先来了解下回调函数。回调函数会在被调用后的某一时刻执行，除此之外与其他普通函数并无差别。由于 JavaScript 的异步特征，在一些不能立即获得函数返回值的地方都需要使用回调函数。
	首先来了解下回调函数。回调函数会在被调用后的某一时刻执行，除此之外与其他普通函数并无差别。由于 JavaScript 的异步特征，在一些不能立即获得函数返回值的地方都需要使用回调函数。


		![Example of Callback hell.](https://cdn-images-1.medium.com/max/2000/1*uYstZyc0A4ZSO2Xxh-ASIg.png)
		注意回调函数的嵌套和程序末尾 `})` 的层级。鉴于结构上的相似性，这种方式被形象地称作[回调地狱](http://callbackhell.com/)或[回调金字塔](https://en.wikipedia.org/wiki/Pyramid_of_doom_(programming))。这种方式的一些缺点是 ——

	注意回调函数的嵌套和程序末尾 `})` 的层级。鉴于结构上的相似性，这种方式被形象地称作[回调地狱](http://callbackhell.com/)或[回调金字塔](https://en.wikipedia.org/wiki/Pyramid_of_doom_(programming))。这种方式的一些缺点是 ——
	注意回调函数的嵌套和程序末尾 `})` 的层级。鉴于结构上的相似性，这种方式被形象地称作[回调地狱](http://callbackhell.com/)或[回调金字塔](https://en.wikipedia.org/wiki/Pyramid_of_doom_(programming))。这种方式的一些缺点是 ——

	为了解决上述问题，JavaScript 提出了 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。现在，我们可以使用链式结构取代回调函数嵌套的结构。下面是一个例子 ——
	为了解决上述问题，JavaScript 提出了 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 。现在，我们可以使用链式结构取代回调函数嵌套的结构。下面是一个例子 ——


		If the return value is primitive, `Promise.resolve` returns a promise-wrapped version of the value. However, when the return value is a promise object, the same object is returned without any wrapping.
		如果返回值是一个原始值，`Promise.resolve` 则返回该值的一个 promise 版本。但是，如果返回值是 promise 对象，那么 `Promise.resolve` 将原封不动地返回这个对象。

	`canRejectOrReturn()` 是一个 async 函数，他可能返回`'perfect number'` 也可能抛出错误（'Sorry, number too big'）。
	`canRejectOrReturn()` 是一个 async 函数，他可能返回 `'perfect number'` 也可能抛出错误（'Sorry, number too big'）。

	在上面的例子中，`foo` 函数运行结果为 resolved，返回值为 `'perfect number'` 或 `'error caught'`。 `foo` 函数的结果永远不会是 rejected。这就像上面那个只有 `await` 的例子。只是这里将函数 `canRejectOrReturn` 的 rejected 结果返回了，而不是返回了 `undefined`。
	在上面的例子中，`foo` 函数运行结果为 resolved，返回值为 `'perfect number'` 或 `'error caught'`。`foo` 函数的结果永远不会是 rejected。这就像上面那个只有 `await` 的例子。只是这里将函数 `canRejectOrReturn` 的 rejected 结果返回了，而不是返回了 `undefined`。


		You can break return await canRejectOrReturn(); to see the effect —
		你可以将语句 return await canRejectOrReturn();拆开再看看效果 ——

	你可以将语句 return await canRejectOrReturn();拆开再看看效果 ——
	你可以将语句 `return await canRejectOrReturn();` 拆开再看看效果 ——

	注意 `async` 在 `.map`方法中。我们可能希望变量 `counts` 存储着的公开仓库数量。但是，就如我们之前所见，所有的 async 函数均返回 promise 对象。因此，`counts` 实际上是一个 promise 对象数组。`.map` 为每一个 `username` 调用异步函数，`.map` 方法将每次调用返回的 promise 结果保存在数组中。
	注意 `async` 在 `.map`方法中。我们可能希望变量 `counts` 存储着的公开仓库数量。但是，就如我们之前所见，所有的 async 函数均返回 promise 对象。因此，`counts` 实际上是一个 promise 对象数组。`.map` 为每一个 `username` 调用异步函数，`.map` 方法将每次调用返回的 promise 结果保存在数组中。

通过一些例子深入了解 JavaScript 的 Async 和 Await #5832

通过一些例子深入了解 JavaScript 的 Async 和 Await #5832

Conversation

xionglong58 commented May 22, 2019 • edited by leviding Loading

JaxNext commented May 22, 2019

fanyijihua commented May 22, 2019

lebenito030 commented May 22, 2019

fanyijihua commented May 22, 2019

JaxNext left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fireairforce left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fireairforce commented May 23, 2019

fireairforce commented May 23, 2019

leviding commented May 23, 2019

lebenito030 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lebenito030 commented May 23, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leviding commented May 25, 2019

xionglong58 commented May 27, 2019

leviding commented May 27, 2019

xionglong58 commented May 22, 2019 •

edited by leviding

Loading