在Angular中使用async-await特性

Promise 和回调函数是在 JavaScript 中编写异步代码的构建块。

在 Angular 应用程序中，我们可以使用 Rx.js 来利用 Observables、Subject、BehaviorSubject 等的强大功能，以优雅的方式编写异步代码。

随着最新版本的 ECMA Script草案，JavaScript 开始支持“异步等待”功能。

ECMAScript 最新草案 (ECMA-262)

1. 什么是Async-await

当async函数被调用，它返回一个Promise。当async函数返回一个值，Promise将resolve返回值。当async函数抛出异常或某个值的时候，Promise将reject抛出的值。

async函数可以包含一个await表达式，该表达式将等待异步函数的执行完成才处理下一条语句, 并将Promise的resolve的结果作为表达式的结果返回，然后恢复async函数的执行并返回resolve的值。

async函数可以包含一个await表达式，该表达式暂停执行下一条语句, 并等待异步函数的执行完成并将Promise执行结果进行解析作为返回值，然后恢复async函数的执行并返回解析的值。

简而言之，您将有机会以同步方式编写异步代码。这样讲有些抽象, 下面我们来看两个实例就清晰了.

2. 实例1

让我们考虑一个简单的例子。一个函数，它返回一个Promise，在两秒后解析并返回作为参数传递的值。


resolveAfter2Seconds(x) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(x);
      }, 2000);
    });
  }

使用 Promise，我们可以使用“then”回调函数获取值。

getValueWithPromise() {
    this.resolveAfter2Seconds(20).then(value => {
      console.log(`promise result: ${value}`);
    });
    console.log('I will not wait until promise is resolved');
  }

在上面的情况下，第 5 行的 console.log() 应在第 3 行的 console.log() 之前执行。这是 Promise 的基本性质。

现在让我们看看 async-await 的用法。

async getValueWithAsync() {
    const value = <number>await this.resolveAfter2Seconds(20);
    console.log(`async result: ${value}`);
  }

这里有几点需要注意：

第 1 行 — 函数以“async”关键字为前缀。如果您的函数具有“await”关键字，则必须使用此前缀。这意味着整个函数还是异步执行, 不会阻塞调用它的主进程. 但是函数内部会有阻塞等待. 这样也非常合理, 毕竟远程调用, 文件读取之类的操作是受到硬件以及网络性能影响, 这部分等待时间是很难从软件层面避免的.
第 2 行 — 我们没有在Promise函数之后调用“.then()”回调函数。相反，我们在函数调用前加上“await”关键字。该关键字不允许在resolveAfter2Seconds结束前执行下一个代码块。这意味着，只有当第 2 行的 Promise 得到解析后，第 3 行的 console.log() 才会被打印，就像同步函数调用一样。
由于我们使用的是 Typescript，因此我们需要将 Promise 返回值类型转换为特定类型，因此第 2 行的 <number> 。

3. 实例2

让我们尝试使用基于承诺的方法将两个数字相加。


addWithPromise() {
    this.resolveAfter2Seconds(20).then(data1 => {
      let result1 = <number>data1;
      this.resolveAfter2Seconds(30).then(data2 => {
        let result2 = <number>data2;
        this.additionPromiseResult = result1 + result2;
        console.log(`promise result: ${this.additionPromiseResult}`);
      });
    });
  }

在现实世界的应用程序中，最终陷入嵌套的 Promise-then 代码结构（回调地狱）是很常见的。通过 2 层嵌套，我们得到了上面的代码。想象一下 7-8 层嵌套，其中包含捕获的变量和异常（如果有）。这很可怕不是吗？

现在采用基于异步的方法。


async addWithAsync() {
    const result1 = <number>await this.resolveAfter2Seconds(20);
    const result2 = <number>await this.resolveAfter2Seconds(30);
    this.additionAsyncResult = result1 + result2;
    console.log(`async result: ${this.additionAsyncResult}`);
  }

两种方法都会给我们相同的结果，但就代码可读性而言, 代码的简单程度，维护“async-await”优于经典的 Promise-then 方法。

4. 使用 Http REST APIs

到目前为止我们讨论了简单的例子。在 Angular 应用程序中，我们可以使用 Http（即将废弃）或 HttpClient 服务来获取 REST 数据。默认情况下，HttpClient 类的“get()”、“put()”、“delete()”和“post()”方法返回Observable<T>。该结果集可以通过“subscribe”方法或使用 RxJs 中的“toPromise()”运算符来使用。

4.1. 使用 Observable 获取 HttpClient 结果

我见过许多Angular开发者使用“subscribe”来获取 Http REST 数据，但不知道它与“promise”的区别。“subscribe”方法来自“Observable”对象。订阅后，只要“Observer”产生新数据，就会执行“subscribe”回调。而 Promise 的“then()”回调处理程序应最多执行一次。因此，除非您需要使用重复数据，否则不要使用“订阅”。请改用“toPromise()”。如果你注意到 Angular 官方文档中给出的示例；大量使用“toPromise”。


getDataUsingSubscribe() {
    this.httpClient.get<Employee>(this.url).subscribe(data => {
      this.subscribeResult = data;
      console.log('Subscribe executed.')
    });
    console.log('I will not wait until subscribe is executed..');
  }

4.2. 使用 toPromise 获取 HttpClient 结果

Rx.js 提供了一个名为“toPromise()”的运算符，可用于将Observeble<T>转换为 Promise。一旦转换，只要有数据，它的“then”块就会被执行。


getDataUsingPromise() {
    this.httpClient.get<Employee>(this.url).toPromise().then(data => {
      this.promiseResult = data;
      console.log('Promise resolved.')
    });
    console.log('I will not wait until promise is resolved..');
  }

4.3. 使用 async-await 获取 HttpClient 结果

使用async-await模式，我们既不需要“订阅”也不需要“then”。代码看起来非常简单明了。从“url”获取数据后，将执行第 3 行，Observerable<T> 转换为 Promise，Promise 被解析，数据存储在“asyncResult”成员变量中。

async getAsyncData() {
    this.asyncResult = await this.httpClient.get<Employee>(this.url).toPromise();
    console.log('No issues, I will wait until promise is resolved..');
  }

4.4. Conditional programming

很多时候应用程序需要从一个 url 获取数据并使用条件来获取下一个数据。使用 Promise 代码应如下所示：

getConditionalDataUsingPromise() {
    this.httpClient.get<Employee>(this.url).toPromise().then(data => {
      console.log('First Promise resolved.')
      if (data.id > 5) {
        let anotherUrl = 'http://dummy.restapiexample.com/api/v1/employee/23';
        this.httpClient.get<Employee>(anotherUrl).toPromise().then(data => {
          this.conditionalPromiseResult = data;
          console.log('Second Promise resolved.')
        });
      }
    });
  }

使用 async-await 代码应如下所示：


async getConditionalDataUsingAsync() {
    let data = await this.httpClient.get<Employee>(this.url).toPromise();
    if (data.id > 5) {
      let anotherUrl = 'http://dummy.restapiexample.com/api/v1/employee/23';
      this.conditionalAsyncResult = await this.httpClient.get<Employee>(anotherUrl).toPromise();
    }
    console.log('No issues, I will wait until promise is resolved..');
  }

5. Angular 系列文章

最新更新以及更多Angular相关文章请访问鹏叔的技术博客空间 - Angular

6. 总结

总而言之，async-await等待功能为我们提供了一种在Angular应用程序中编写异步代码的更好方法。