ionic5 コード スニペット: HTTP ネットワーク リクエスト

著者：ネオヤン 時間：2020/04/18 読む： 7729

---

使用したバージョン: ionic5 および angular8

1. 入手

1.app.module.js

冒頭の紹介：

import { HttpClientModule } から '@angular/common/http';

インポートに追加:

輸入品: [
     ...
     HTTPクライアントモジュール、
     ...
     ],

2. ページの ts ファイル (xxx.page.ts)

冒頭の紹介：

import { HttpClient} から '@angular/common/http';

コンストラクター内:

コンストラクタ（ 
   プライベート http: HttpClient
  ) { }

ngOnInit() または他の関数:

var url = "https://xxxxxx" ;    
this.http.get(url).subscribe(
    データ => {
      コンソール.ログ(データ);
      },
    エラー => {
      console.log('エラー');
      })

2.投稿

1.app.module.js

GETと同じです。

2. ページの ts ファイル (xxx.page.ts)

最初にインポートします: (HttpHeaders の導入、ヘッダーを設定するためのポストリクエストに注意してください)

import { HttpClient , HttpHeaders} から '@angular/common/http';

コンストラクター内:

GETと同じです。

ngOnInit() または他の関数:

var url = "https://xxxxxx" ; 
const httpOptions = {
    ヘッダー: new HttpHeaders({ 'Content-Type': 'application/json' })
 };
this.http.post('url',{
    キー1: 値1、
    キー2: 値2
  } ,httpオプション)

• ヘッダーの「Content-Type」:「application/json」は共通ヘッダーです。ニーズに応じて設定してください。
• keyとvalueはpostのパラメータです。

3.JSONP

1.app.module.js

冒頭の紹介：

import { HttpClientModule,HttpClientJsonpModule } から '@angular/common/http';

インポートに追加:

輸入品: [
     ...
     HTTPクライアントモジュール、
     HttpClientJsonpモジュール、
     ...
     ],

2. ページの ts ファイル (xxx.page.ts)

冒頭の紹介：

GETと同じです。

コンストラクター内:

GETと同じです。

ngOnInit() または他の関数:

var url="https://xxxxxx"; this.http.jsonp(url,"callback").subscribe(
    データ=>{
        コンソール.ログ(データ);
    },エラー=>{
        console.log('エラー');
    })