迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

Angular then() 方法

作者:迹忆客 最近更新:2023/03/13 浏览次数:

我们将介绍 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.tsAppModule 的导入数组中,如下所示。

# 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));
    });
  }

输出:

then() 使用 Promise 的 Angular 方法示例

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

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便