迹忆客 专注技术分享

我们将介绍 then() 方法并讨论 Angular 中的 promises。

在 Angular 中使用 then() 方法

then() 是用作第二个参数的 Angular promise 方法。then() 方法仅在 promise 被拒绝时执行。

要详细了解 then() 方法，我们首先必须了解 Angular 中的 promises。

Angular 中的 promise

当应用程序更简单时，回调函数会立即被调用，但随着应用程序变得复杂且使用现代浏览器的 JavaScript 变得更丰富，回调变得很麻烦。回调函数变得更慢，有时在请求数据时会卡住。

作为 ES6 中的解决方案，引入了 promises 来解决问题并简化它们。它们是用于更好地编写异步函数并且易于维护的强大抽象。

promise 是一种 API 抽象，主要用于同步处理异步操作。

使用以下命令，让我们创建一个新应用程序。

# angular
ng new my-app

在 Angular 中创建我们的新应用程序后，我们将转到我们的应用程序目录。

# angular
cd my-app

现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。

# angular
ng serve --open

接下来，我们创建一个 promise，它将在等待 1 秒后返回一个值。首先，我们将导入 HttpClientModule 并将其添加到 app.module.ts 中 AppModule 的导入数组中，如下所示。

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

然后，我们开始在 app.component.ts 中注入 HttpClient 并创建一个构造函数并定义我们的 API URL。

# angular
import { Component, VERSION, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';

  constructor(private httpClient: HttpClient){}
}

一旦我们注入了 HttpClient，我们定义了一个 fetchJson() 并从 ngOnInit() 调用它，所以它在应用程序加载时被初始化。如下图所示，我们在 app.component.ts 中的代码会有额外的代码。

# angular
ngOnInit(){
    this.fetchJson();
  }
  private fetchJson(){}

我们将使用 get() 方法发送 GET HTTP 请求以返回可观察对象。我们将使用 toPromise() 将其转换为 promise，我们将使用 then() 方法。

# angular
private fetchJson(){
    const promise = this.httpClient.get(this.apiUrl).toPromise();
    console.log(promise);
    promise.then((data)=>{
      console.log("Promise resolved with: " + JSON.stringify(data));
    }).catch((error)=>{
      console.log("Promise rejected with " + JSON.stringify(error));
    });
  }

输出：

从上面的输出中，promise 已解决，它还使用 promise 获取的 then() 方法返回数据。我们可以使用带有 Promise 的 then() 方法作为第二个参数。