一、异步请求
异步请求有三种方式：1. 回调函数获取异步数据 2.Promis获取异步数据 3. Rxjs获取异步数据
1.1 回调函数获取异步数据
通过函数传递，并在回调函数中调用这个函数的方式实现回调，但逻辑结构不够清晰，整个过程无法对他进行额外操作，且容易造成回调地狱。
request.service.ts
// 用callback方式getCallbackData(cb) {setTimeout(() => {var username = "张三";cb(username);},1000);}
外部调用：
// callback获取异步数据
this.request.getCallbackData((data) => {console.log("callback = " + data);
});1.2 Promise获取异步数据
通过ES6提供的Promis获取异步数据，可以做阻塞等多种操作。若成功则调用resolve返回，失败调用reject返回
request.service.ts
// 用Promise处理异步getPromisData() {return new Promise((resolve, reject) => {setTimeout(() => {var username = "李四";resolve(username);},3000);})}外部调用：
// Promise获取异步数据
var promiseData = this.request.getPromisData();
promiseData.then((data) => {console.log("promise = " + data);
})
1.3 Rxjs获取异步数据
Rxjs用法与Promise类似，但关键词不同。Promise中是用resolve、reject、then关键字， Rxjs是用new Observable、next、subscribe来定义的。同时，Rxjs还提供过滤器和匹配功能，可以过滤和修改返回的数据。
request.service.ts
getRxjsIntervalNum() {let count = 0;return new Observable<any>((observable) => {setInterval(() => {count++;observable.next(count);},1000)})}外部调用：
// Rxjs 使用用具方法对返回的数据进行处理// filter: 过滤数据// map: 处理数据var rxjsData4 = this.request.getRxjsIntervalNum();rxjsData4.pipe (filter((value) => {// 只显示偶数的数据了if(value%2==0) {return true;}}),map((value) => {return value*value;})).subscribe((data) => {console.log("rxjs filter map = " + data);})}
二、两种http请求方式
2.1 使用Angular提供的HttpClientModule模块请求
app.module.ts
// 引入HttpClientModule服务
import { HttpClientModule } from '@angular/common/http'http.service.ts
// 先引入模块组件
import { HttpClient,HttpHeaders } from '@angular/common/http'外部使用：
get请求
getData() {let api = 'http://a.itying.com/api/productlist';// 已经结合了rxjsthis.http.get(api).subscribe((response:any) => {// 自动将服务器的响应数据转换成对象console.log(response);this.list = response.result;});}post请求
doLogin() {// 手动设置请求类型const httpOptions = {headers: new HttpHeaders({'Content-Type': 'application/json'})};var api = "http://127.0.0.1:3000/dologin";var data = {"username" : "张三","age": 20}this.http.post(api, data, httpOptions).subscribe((response:any) => {console.log(response);})}
2.2 使用axios请求
2.1.1 先现在axios
npm install axios --save
2.2.2 使用axios
axiosHttp.service.ts
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';import axios from 'axios';@Injectable({providedIn: 'root'
})
export class AxiosHttpService {constructor() { }axiosGet(api) {return new Observable((observe) => {axios.get(api).then(function (response) {console.log(response);observe.next(response);})// 失败.catch(function (error) {observe.next(error);})})}
}
外部使用：
axiosGet(api) {return new Observable((observe) => {axios.get(api).then(function (response) {console.log(response);observe.next(response);})// 失败.catch(function (error) {observe.next(error);})})}