聊聊JavaScript的Asynchronous

async await啊

需要异步

异步进程是需要时间来执行的进程。 它必须等到工作完成才能返回一些东西。

例如，函数 fetchData 为数据赋值（例如：从服务器获取数据）并，displayData 显示获取的数据：

示例方法

当我们运行这个代码片段时，我们得到的是“undefined”而不是实际数据。

结果

发生这种情况是因为 displayData 在显示之前没有等待数据准备好。 这些函数必须异步链接才能获得所需的结果。

处理异步事件

在 Javascript 中有多种处理异步任务的方法。

Async Callback

回调函数是作为参数传递给另一个函数的函数，目的是在稍后“调用”它。

displayData可以改成如下的回调函数：

callback

在上面的代码片段中，displayData的函数作为参数传递给 fetchData。 fetchData 将在适当的时候执行它。

我们常用的回调示例是 EventListener。

EventListener

event

callback现在被 Promises 和 async/await 取代了。

Promise

Promise 是一个 JavaScript 对象，它提供了一种更简洁的异步事件链接方式。 Promise定义如下：

let pr = new Promise((resolve, reject) => {
    // ...
})

States

Promise 的默认（和初始）状态是“pending”。 待处理基本上是等待作业完成的状态。 根据条件，promise 可以成功“resove/fulfill”或在失败的情况下“reject”。

Promise states — MDN

Chaining (链)

.then()、.catch() 和 .finally() 用于链接当一个Promise被解决或拒绝时应该发生的下一个动作。

chaining

为了使链接正常工作，该函数应始终返回一个Promise。 请参阅以下示例以了解正确用法。

chaining

Promise链的一个常见示例是 Fetch API：

chaining 例

处理多个 Promise

Javascript 提供了很少的方法来处理多个 Promise。 我们将在下一篇文章中深入研究每一个。

多个 promises

现在，大多数情况下，async/await 函数用于异步操作。

Async/Await

Async/Await 是处理 Promise 的一种更简洁的方式。 以 async 为前缀的函数总是返回一个 Promise。

async

我们可以通过以下方式resolve或reject异步函数中的Promise：

async

那么，why await呢？

Await 与 async 一起使用，以确保我们等到 Promise 解决（resolve或reject）。 Await 仅在异步函数中使用时有效。

我们可以使用 async/await 修改我们之前的 Fetch API 示例，如下所示：

async function example

ps: 以后再详细讨论处理更多的异步 JS~~~