从回调到异步/等待

我用4种不同的方式构建了相同的程序。 我从回调开始，转到Promises，使用生成器，最后完成async / await。

该程序：

1. 向Github的用户端点发出请求
2. 撤回我的Github个人资料
3. 记录响应

这是我想出的。

回呼

我努力使用回调发出HTTP请求。 我主要使用Promises编写异步JavaScript 。 我通常在基于Promise的应用程序中使用axios或fetch 。

我最终不得不为此版本的应用程序使用XMLHTTPRequest ，这是我以前从未使用过的！

使用回调

我将指导您完成这段代码的工作：

1. 我定义了一个名为makeHTTPRequest的函数。 它旨在实际向Github发送请求。
2. 我通过了三种方法来使makeHTTPRequest ， url ， methodType和callback 。 url是我要命中的端点。 methodType是我要使用的HTTP方法。 当我实际上从Github返回响应时， callback是我想调用的函数。
3. 我定义了一个名为getLogin的函数，并将其response作为参数传递。 该函数接收我从Github收到的响应，并将其解析为JSON。 然后，它记录解析的响应。
4. 我将getLogin作为callback传递到makeHTTPRequest中。 这意味着getLogin将从Github的响应中获取其参数。

承诺

通过回调实现目标之后，我尝试了诺言。 这感觉很简单，因为我之前已经做过很多次了。

使用承诺

1. 我定义了一个名为makeHTTPRequest的函数，并将其传递给用户名。
2. 我使用fetch向Github发送请求。
3. 我使用.then()等待对Github的请求完成，然后将响应转换为JSON。
4. 我记录响应

发电机

这是我第一次涉足发电机。 在迎接这一挑战时，语法和概念对我来说完全陌生。

使用发电机

1. 我定义了getUser并说它是使用*语法的生成器。 我传入username作为参数。

2.我创建了一个名为response的变量，并将其设置为等于我使用fetch发出HTTP请求后从Github收到的响应。 第3行的重要部分是我使用了关键字yield 。 yield告诉我的程序，我确实希望将response设置为等于从Github返回的响应，但前提是请求完成后。

3.当我将parsedResponse设置为response.json()时，我再次遵循相同的模式。 在设置变量之前，我必须等待Promise解决。 如果我不使用yield ，那么当我尝试记录parsedResponse ，会得到： Promise {<pending>}回来。

异步/等待

最后，我再次使用ES7 async / await编写了该应用程序。 由于我是在使用生成器构建相同的应用程序之后执行此操作的，因此，很明显如何在生成器之上构建async / await。

1. 我定义了一个名为getUser的async函数，该函数将username作为参数。
2. 我创建了一个名为response的变量，并将其设置为等于向/users/:id端点发出请求后从Github收到的响应。 关键是在设置response等于我返回的响应之前，我使用await关键字告诉程序等待请求自行解决。
3. 我在第4行再次使用相同的模式。
4. 然后，我记录解析的响应。

外卖

由于一些原因，这是值得的努力。 首先，我没有使用太多回调，所以我真的不知道Promises有多大的价值。 我也一直认为fetch和axios是理所当然的，因为它们使HTTP请求变得更加简单。

我也从未使用过发电机或异步/等待。 尽管我发现async / await比生成器更容易使用，但是查看async / await是如何在生成器上构建的却很有帮助。 掌握一些ES7语法也很有趣。

From: https://hackernoon.com/from-callbacks-to-async-await-25331b7f73