Angular then() 方法
我们将介绍 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()
方法作为第二个参数。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn