发送请求并处理映射响应以检索数据

介绍

请求的定义是“要求某物或所要求的东西的行为”。是的，如果我们要求某样东西，我们就会从别人那里得到一些东西。例如，如果我们尊重他人，那么我们就会得到他们的尊重。我们的日常生活中会发生很多事情。就像动物一样，如果你对你的宠物表现出爱和关心，那么它们也会爱你，关心你。同样的事情也会发生在我们的应用程序中。当我们发出做某事的请求时，它们会返回带有一些数据的响应。在本指南中，我们将研究我们的应用程序如何处理请求和响应。我们将如何处理应用程序的响应？

使用 Angular 7 加速应用程序开发

Angular 是一个 JavaScript 框架，可让您创建响应式单页应用程序。这是一个领先的前端开发框架，由 Google 的 Angular 团队定期更新。Angular 7完全基于组件。

渐进式 Web 应用

我们可以利用现代网络平台功能来提供类似应用程序的体验：高性能、离线和零步骤安装。

普遍的

Angular 7 可以在 Node.js®、.NET、PHP 和其他服务器上提供应用程序的第一个视图，仅使用 HTML 和 CSS 即可实现近乎即时的渲染。

代码生成

Angular 将您的模板转换为针对当今的 JavaScript 虚拟机高度优化的代码，让您享受手写代码的所有好处以及框架的生产力。

本国的

您可以使用 Cordova、Ionic 或 NativeScript 的策略构建原生移动应用程序。

理解请求和响应过程很有益，因此我们在本指南中使用Angular 7示例来解释。

设置 Angular 来探索自己

在开始本指南之前，我会告诉你我们正在使用Angular 7来处理 HTTP。因此，请确保你的系统中有Node.js ；如果没有，你可以从这里安装它。

接下来需要做的是安装 Angular。我们通过npm安装它。

      npm install -g @angular/cli

入门

@angular/common/HTTP 中的Http Client为Angular 应用程序提供了一个简化的客户端 HTTP API，该 API 依赖于浏览器公开的 XMLHttpRequest 接口。HttpClient 的其他一些优点包括可测试性功能、类型化的请求和响应对象、请求和响应拦截、Observable API 以及简化的错误处理。我们使用 HttpClient 将数据从服务器提取到我们的应用程序。

Angular 7 中如何实现数据绑定？

Angular 7 中有两种类型的数据绑定：

单向数据绑定

单向数据绑定是一种简单的单向通信，当我们在 TypeScript 代码中进行更改时，HTML 模板也会更改。

      import { Component } from "@angular/core";  
@Component({  
    selector: 'my-App',  
    template: `  
                <div>  
                  <strong>{{name}}</strong>  
                </div> `
})

export class AppComponent {  
    name: string = "Sachin";  
}
    

双向数据绑定

在双向数据绑定中，数据自动同步发生在模型和视图之间。此时，更改会反映在两个组件中。每当您在模型中进行更改时，它都会反映在视图中，而当您在视图中进行更改时，它也会反映在模型中。

      import { Component } from '@angular/core';  
  
@Component({  
    selector: 'my-app',  
    template: `  
                Enter the value  : <input [value]='name' (input)='name = $event.target.value'>  
                <br>  
                 Entered value : Hi  {{name}}  
              `  
})  
export class AppComponent {  
    name: string = '';  
}
    

Angular 7 中的 RxJS 是什么？

RxJS 是一个用于响应式编程的库，它使用 Observables 来简化编写异步或基于回调的代码。该项目是对 Reactive-Extensions/RxJS 的重写，具有更好的性能、更好的模块化和更好的可调试调用堆栈，同时保持了大部分向后兼容性，并进行了一些重大更改以减少 API 界面。在服务中，我们导入如下所示的 RxJS 来调用 API。

      import * as Rx from "rxjs/Rx";
import { from, Observable } from 'rxjs';
    

深入代码

现在您的系统上已经安装好了所有内容，让我们看一个简单的示例代码。

步骤 1：开始一个新项目

由于 Angular 是一个框架，我们需要遵循框架的一些标准。要在 Angular 中创建新项目，请使用命令ng new project_name。我将我的项目命名为ResponseData_Binding。

      ng new ResponseData_Binding

第 2 步：创建第一个用于请求和响应的 Angular 7 应用程序

设置 HttpClient第一步是在 src/app/app.module.ts 中导入 HttpClientModule。

      import { HttpClientModule } from '@angular/common/http';
@NgModule({
    declarations: [
        AppComponent
    ],
imports: [BrowserModule,HttpClientModule],
bootstrap: [AppComponent]
})
export class AppModule { }
    

接下来，让我们创建一个类模型。我们将使用命令ng generate class class_name。我将我的类名命名为users。

      ng generate class users

生成类后，您必须添加对象：

      export class Users {
    id:number;
    email: string;
    first_name: string;
    last_name: string;
}
    

对于请求，我们需要调用 Angular 中所需的服务文件的 API。使用命令ng generate service service_name。我将类名命名为apicall。

      ng generate service apicall

生成 apicall.service.ts 后，导入 HTTP 客户端，并在构造函数中进行初始化，如下所示。

      import { HttpClient } from '@angular/common/http';
    

在构造函数中，

      constructor(private httpClient: HttpClient) {}
    

您可以使用以下命令来运行 Angular。

      ng serve

步骤 3（a）：我们的第一个请求是获取所有列表并与表绑定

Angular 定义了一组使用请求方法的请求来指示针对给定资源要执行的所需操作。

要请求获取所有用户列表，请按照以下代码步骤操作：

apicall.service.ts

      import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Users } from './users';
import * as Rx from "rxjs/Rx";
import { from, Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class ApicallService {
  constructor(private httpClient: HttpClient) {}
  getUsers() {
    return this.httpClient.get(`https://reqres.in/api/users`).
        pipe(
           map((data: Users[]) => {
             return data;
           }), catchError( error => {
             return throwError( 'Something went wrong!' );
           })
        )
    }
}
    

在上面的代码中，我们创建了getUsers()方法来调用 API。我们调用 HTTP GET 方法来获取所有用户的列表。我们请求 API URL https://reqres.in/api/users ，以使用map键获取到 Users 类的响应映射。它将返回响应并映射到对象。如果有任何异常，它将抛出错误“出错了！ ”。

应用程序.组件.ts

      export class AppComponent {
  
  users : Users[];
  
  constructor(public http: HttpClient, private apiService: ApicallService){}

  ngOnInit(){
    this.getUserList();
  }

  getUserList(<span class="hljs-params

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文