注：以下學(xué)習(xí)筆記均來源于Angular教程_Angular8 Angular9 Angular12入門實(shí)戰(zhàn)視頻教程

一、Rxjs介紹

RxJS 是 ReactiveX 編程理念的 JavaScript 版本。ReactiveX 來自微軟，它是一種針對(duì)異步數(shù)據(jù)流的編程。Angular 引入 RxJS 就是為了讓異步可控、更簡(jiǎn)單。
目前常見的異步編程的幾種方法：

• 回調(diào)函數(shù)

• 事件監(jiān)聽/發(fā)布訂閱

• Promise

• RxJS

二、Promise 和 RxJS 處理異步對(duì)比

• RxJS 和 Promise 的基本用法非常類似；Promise 中用的是 resolve() 和 then()，而 RxJS 中用的是 observer.next() 和 subscribe()。

• 但 RxJS 相比 Promise 要強(qiáng)大很多。RxJS 可以中途撤回、發(fā)射多個(gè)值、提供了多中工具函數(shù)等等。

1、RxJS unsubscribe 取消訂閱

2、RxJS 訂閱后多次執(zhí)行

三、Angular 中的數(shù)據(jù)交互（get jsonp post）

1、Angular get 請(qǐng)求數(shù)據(jù)

• 在 app.module.ts 中引入?HttpClientModule?并注入

• 在用到的地方引入?HttpClient，并在構(gòu)造函數(shù)中聲明

• get 請(qǐng)求數(shù)據(jù)

2、Angular post 提交數(shù)據(jù)

• 在 app.module.ts 中引入?HttpClientModule?并注入

• 在用到的地方引入?HttpClient，HttpHeaders，并在構(gòu)造函數(shù)中聲明 HttpClient

• post 提交數(shù)據(jù)

3、Angular Jsonp 請(qǐng)求數(shù)據(jù)

• 在 app.module.ts 中引入?HttpClientModule，HttpClientJsonpModule，并注入

• 在用到的地方引入?HttpClient，并在構(gòu)造函數(shù)中聲明

• jsonp 獲取數(shù)據(jù)

4、Angular 中使用第三方模塊 axios 請(qǐng)求數(shù)據(jù)

• 安裝 axios

• 用到的地方引入 axios

• 使用 axios 請(qǐng)求數(shù)據(jù)