Angular—數據交互詳解

目錄

一、概述

二、get請求

三、post請求

四、Jsonp請求

五、第三方模塊axios請求數據

---

一、概述

Angular5.x以後get、post和服務器交互使用的是HttpClientModule模塊。

二、get請求

第一步：在app.module.ts中引入HttpClientModule，並注入

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

...

imports: [HttpClientModule]

第二步：在用到的地方引入HttpClient，並在構造函數聲明

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

...

constructor(public http:HttpClient) { }

第三步：請求數據

var api = "http://a.itying.com/api/productlist"; 
this.http.get(api).subscribe(response => { 
    console.log(response); 
});

// Angular底層封裝http請求時使用的是rxjs, 所以使用subscribe獲取異步請求裏的數據

三、post請求

第一步：在app.module.ts中引入HttpClientModule，並注入

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

...

imports: [HttpClientModule]

第二步：在用到的地方引入HttpClient、HttpHeaders，並在構造函數中聲明HttpClient

import { HttpClient, HttpHeaders } from "@angular/common/http";

...

constructor(public http:HttpClient) { }

第三步：請求數據

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
var api = "https://www.runoob.com/try/ajax/demo_axios_post.php";
this.http.post(api, { firstName: 'Fred', lastName: 'Flintstone' }, 
                                httpOptions).subscribe(response => {
    console.log(response);
});

四、Jsonp請求

如果後臺不允許跨域，可以使用jsonp獲取服務器數據。jsonp是跨域的一種解決方案。

要請求服務器的jsonp接口，則服務端必須支持jsonp纔行，如何驗證服務端支持jsonp，如下代碼所示。

// 在地址後面加上callback參數, 如果服務端支持jsonp, 會將callback的參數值當作返回函數執行
// 並將遠程的數據傳入該返回函數
https://www.runoob.com/try/ajax/demo_axios_post.php?callback=xxx

 

第一步：在app.module.ts中引入HttpClientModule、HttpClientJsonpModule，並注入

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

...

imports: [
    HttpClientModule,
    HttpClientJsonpModule
]

第二步：在用到的地方引入HttpClient，並在構造函數聲明

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

...

constructor(public http:HttpClient) { }

第三步：請求數據

var api = "http://a.itying.com/api/productlist"; 
this.http.jsonp(api,'callback').subscribe(response => { 
    console.log(response); 
});

五、第三方模塊axios請求數據

第一步：安裝axios

> cnpm install axios--save

第二步：用到的地方引入axios

import axios from 'axios';

第三步：請求數據

參考Vue—axios詳解