JavaScript promises和async await有什么区别？

Harry前端Itachi2020-03-12

我已经在移动应用程序和Web应用程序中使用了ECMAScript 6和ECMAScript 7功能（由于Babel）。

第一步显然是达到ECMAScript 6级别。我学习了许多异步模式，promise（确实是很有希望的），生成器（不确定为什么使用*符号）等。其中，promise非常适合我的目的。而且我已经在我的应用程序中使用它们很多次了。

这是我如何实现基本诺言的示例/伪代码-

var myPromise = new Promise(
    function (resolve,reject) {
      var x = MyDataStore(myObj);
      resolve(x);
    });

myPromise.then(
  function (x) {
    init(x);
});

随着时间的流逝，我遇到了ECMAScript 7功能，其中之一是ASYNC和AWAIT关键字/功能。这些结合在一起创造了很大的奇迹。我已经开始用代替我的一些诺言async & await。它们似乎为编程风格增加了巨大的价值。

同样，这是我的async，await函数的伪代码，如下所示：

async function myAsyncFunction (myObj) {
    var x = new MyDataStore(myObj);
    return await x.init();
}
var returnVal = await myAsyncFunction(obj);

撇开语法错误（如果有的话），我感觉都是一样。我几乎可以用异步唤醒来代替我的大部分诺言。

为什么诺言做类似的工作时需要异步等待？

异步等待解决更大的问题吗？还是只是针对回调地狱的另一种解决方案？

如前所述，我能够使用promise和async，等待解决相同的问题。异步等待解决了什么具体问题？

补充说明：

我已经在我的React项目和Node.js模块中广泛使用异步，唤醒和承诺。React特别是早起的鸟儿，并采用了许多ECMAScript 6和ECMAScript 7功能。

小胖Gil2020/03/12 18:12:05

全面比较优缺点。

纯JavaScript

优点

不需要任何其他库或技术

表现最佳

提供与第三方库的最佳兼容性

允许创建临时和更高级的算法

缺点

可能需要额外的代码和相对复杂的算法

异步（库）

优点

简化最常见的控制流模式

仍然是基于回调的解决方案

很好的表现

缺点

引入外部依赖

对于高级流可能仍然不够

承诺

优点

极大地简化了最常见的控制流模式

强大的错误处理

ES2015规范的一部分

确保onFulfilled和onRejected的延迟调用

缺点

需要承诺基于回调的API

引入了较小的性能影响

发电机

优点

使非阻塞API看起来像一个阻塞的API

简化错误处理

ES2015规范的一部分

缺点

需要一个补充的控制流库

仍然需要回调或承诺以实现非顺序流

需要对基于非生成器的API进行分类处理

异步等待

优点

使非阻塞API看起来像阻塞

简洁直观的语法

缺点

要求今天使用Babel或其他编译器以及一些配置

Harry凯2020/03/12 18:12:05

在需要复杂的控制流的情况下，异步/等待可以帮助使代码更清晰，可读性更好。它还会产生更多的调试友好代码。并且可以用just处理同步和异步错误try/catch。

我最近写了这篇文章，通过代码示例展示了异步/等待优于promise的优势：6个为什么JavaScript异步/等待使承诺消失的原因（教程）

Jim老丝梅2020/03/12 18:12:05

为什么Promises做类似的工作时需要异步等待？异步等待解决更大的问题吗？

async/await只是给您异步代码的同步感觉。这是一种非常优雅的语法糖。

对于简单的查询和数据操作，Promises可能很简单，但是如果您遇到了复杂的数据操作和不涉及任何内容的场景，那么如果代码看起来好像是同步的，则更容易理解正在发生的情况（换句话说，语法本身就是一种“偶然的复杂性”，async/await可以绕开。

如果您想知道，可以使用类似co（与生成器一起）的库来提供相同的感觉。已经开发了类似的方法来解决async/await最终解决的问题（本机）。

朔风2020/03/12 18:12:05

在更复杂的情况下，异步/等待提供了更好的语法。特别是涉及循环或某些其他构造（例如try/）的任何事物catch。

例如：

while (!value) {
  const intermediate = await operation1();
  value = await operation2(intermediate);
}

仅使用Promises，此示例将更加复杂。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer