アングルHTTPクライアント

目的:この記事では、HTTPライブラリを角度、HTTP GETリクエスト、Web APIリクエストで使用します.
この記事を完了する前に事前に必要な場合は、Visual Studioのコード、Node Package Manager(NPM)、ノード、角CLIを含むすべての事前に必要なツールをインストールする必要があります.
セットアップ✨

ローカルマシンでVisual Studioコードを開きます.

ファイルメニューに移動し、開いているフォルダオプションを選択します.

このエクササイズのための新しいプロジェクトを作成し、このフォルダーを選択します.

新しいプロジェクトを作成します.Ctrl + backtic (`)キーで開いた端末を実行し、NG new angle mediumコマンド

を実行します.
環境のブートストラップ✌
Visual Studioコードの

、Ctrl + backtic (`)キーキーを押すと、Open Terminalオプションを選択します.

NPMを使用して角度媒体プロジェクトを実行します.

npm start

ポートを正しく使用するには、次のポートを使用します.

npm start --port 8000 --open

HTTPモジュールを追加する
アプリのフォルダ内で、アプリを開きます.モジュールです.tsファイル.
2 . Atangle/HTTPパッケージからhttpmoduleモジュールをインポートするファイルの先頭にimport文を追加します.

import {HttpModule} from '@angular/http';

NgModuleデコレータのインポート配列プロパティの値にHttpModuleモジュールを追加することでNGModuleデコレータを更新します.

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

注:このプロジェクトを実行すると、このプロジェクトは実行できません.このエラーを得る
端末でこれを実行します.👍

npm install @angular/http@latest

HTTP getメソッドを起動する
アプリのフォルダ内の

、アプリを開きます.コンポーネント.tsファイル.

@ angle/HTTPライブラリモジュールからHTTPとレスポンスメンバ(クラス)をインポートする新しいimport文を追加します.

import {Http, Response} from '@angular/http';

AppComponentクラス内で、arrayのDataItemsという名前の新しいプロパティを追加します.

export class AppComponent {
    public dataItems : ItemList[]=[];
}

モデルという名前のモデルを作成します.TS

export class ItemList{
    public userId: number;
    public id: number;
    public title: string
}

AppComponent輸入モデルモデル内.TS

import { ItemList } from './model';

AppComponentクラス内でHTTPのHTTPという単一のパラメータを持つコンストラクターを追加します.

export class AppComponent {
    public dataItems : ItemList[]=[];
    constructor(private http : Http) {
    }
}

7 . getDummyPapataメソッドをコンストラクタに追加する

constructor(private http : Http) {
    this.getDummyApiData();
}

8 .コンストラクタの外でgetdummyapidataメソッドを追加します.また、toPromiseメソッドを呼び出します.

private getDummyApiData(){
      this.http.get('https://jsonplaceholder.typicode.com/posts')
        .toPromise()
    }

9 .メソッドの呼び出しをチェインすることで、成功した約束のハンドラを追加します.

private getDummyApiData(){
      this.http.get('https://jsonplaceholder.typicode.com/posts')
        .toPromise()
        .then()
    }

thenメソッド内で、ResponseオブジェクトのJSONメソッドを呼び出し、以前に作成したデータ項目の値を保存します.

private getDummyApiData(){
      this.http.get('https://jsonplaceholder.typicode.com/posts')
        .toPromise()
        .then(response => {
          this.dataItems = response.json();
          console.log(this.dataItems)
        })
    }

11 . catchメソッドの呼び出しをチェインし、セミコロンを追加して文を完了することによって、失敗した約束のハンドラを追加します.

private getDummyApiData(){
      this.http.get('https://jsonplaceholder.typicode.com/posts')
        .toPromise()
        .then(response => {
          this.dataItems = response.json();
          console.log(this.dataItems)
        })
        .catch(error => console.log(error))
    }

12 .あなたの最終的なアプリ.コンポーネント.TSクラスは次のようになります.👀

import {Component} from '@angular/core';
import {Http, Response} from '@angular/http';
import { ItemList } from './model';
@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: './app.component.css',
})
export class AppComponent {
    dataItems:ItemList[]=[];
   constructor(private http: Http) {  
      this.getDummyApiData();
    }
private getDummyApiData(){
      this.http.get('https://jsonplaceholder.typicode.com/posts')
        .toPromise()
        .then(response => {
          this.dataItems = response.json();
          console.log(this.dataItems)
        })
        .catch(error => console.log(error))
    }
}

HTTPレスポンスをレンダリングする
アプリ/ビューのフォルダ内で、アプリケーションを開きます.コンポーネント.HTMLファイル.
2 .コンポーネントクラスのDataItem Array Typeプロパティの値をテンプレート式を反復処理します.

<h1>Demo App</h1>
<hr />
<strong>Example List Item:</strong>
<ul>
    <li *ngFor="let item of dataItems">
        {{item.title}}
    </li> 
</ul>

出力
cannot find module '@angular/http'?

Github
リファレンス
StackBlitz
Fake Online REST API for Testing and Prototyping
TypeScript
Angular CLI