0.系列文章

項目源碼請猛戳這里!!!

1.前言

俗話說：檢驗學習成果最直接的方式就是造論子。本系列文章是博主在學習了TypeScript之后，為了檢驗自己的學習成果，萌生出造一個輪子試試的想法。由於是第一次造輪子，所以想選擇一個常用，易於理解，並且自己較熟悉的輪子。網上搜索一番，發現前后端交互神器axios造的人挺多的，並且提供了很多重構思路，為了能夠站在巨人的肩膀上，並且axios也剛好符合上面提到的三個要求，那就是它啦，使用TypeScript重構axios。

2.需求分析

axios,基於Promise的HTTP客戶端，用於瀏覽器和node.js

重構之前，我們需要簡單地做一些需求分析，看一下我們這次重構需要支持哪些 Features。官方支持的Features如下：

Make XMLHttpRequests from the browser（在瀏覽器端使用 XMLHttpRequest 對象通訊）
~~Make http requests from node.js（在 Node.js 端使用 http request 通訊）~~
Supports the Promise API（支持 Promise API）
Intercept request and response（支持請求和響應的攔截器）
Transform request and response data（支持請求數據和響應數據的轉換）
Cancel requests（支持請求的取消）
Automatic transforms for JSON data（JSON 數據的自動轉換）
Client side support for protecting against XSRF（客戶端防止 XSRF）

這次重構，我們只實現官方支持的8個Features中的7個，其中axios在node中的應用不打算實現，因為這部分在日常使用中相對較少（其實是因為懶，逃~）。

3.了解axios

axios 本質上就是發送一個請求拿到響應結果中途可以去對配置參數、請求數據和響應數據處理同時也支持一些攔截器的調用，它的工作流程如下：

而我們后續的重構思路也是嚴格按照這樣一個工作流程展開。

3.目錄介紹

本項目分為客戶端（examples文件夾）和服務端（server文件夾）：客戶端主要是用來檢驗重構功能的demo，采用TypeScript按照模塊化進行編寫；服務端是用來響應demo中發出的請求，采用express編寫。

├─.gitignore
├─index.html
├─package.json
├─README.md
├─tsconfig.json       // TypeScript 編譯配置文件
├─tslint.json         // TypeScript lint 文件
├─examples            // 每個功能點的demo
├─server              // 服務端源碼
└─src                 // 源碼目錄
    ├─axios.ts
    ├─defaultes.ts  
    ├─cancel    
    ├─core    
    ├─helpers   
    └─types

4.項目運行

# 克隆項目到本地
git clone https://github.com/NLRX-WJC/ts-axios.git

# 進入項目目錄
cd ts-axios

# 安裝依賴
npm install

# 同時打開客戶端和服務端
npm run server | npm start

OK，介紹完了，現在就讓我們開始使用TypeScript重構axios吧！！！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 寫在最前面 - 《看懂每一行代碼 - kubernetes》寫在最前面 - 每天5分鍾玩轉 OpenStack（1）寫在最前面 - 每天5分鍾玩轉容器技術（1）使用Typescript重構axios(三十二)——寫在最后面（總結）使用Typescript重構axios(十五)——默認配置 oracle 空值排序,排在最前面或者最后面 oracle 空值排序,排在最前面或者最后面 js 將一段html插入到body最前面 linux用sed在文件最前面插入一行 sql 把特定數據排在最前面