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详解