Axios原始碼深度剖析

axios原始碼分析 - xhr篇

文章原始碼託管在github上，歡迎fork指正！

axios 是乙個基於 promise 的http請求庫，可以用在瀏覽器和node.js中，目前在github上有 42k 的star數

每一小節都會從兩個方面介紹：如何使用 -> 原始碼分析

[工具方法簡單介紹]一節可先跳過，後面用到了再過來檢視

axios最核心的技術點是如何攔截請求響應並修改請求引數修改響應資料和 axios是如何用promise搭起基於xhr的非同步橋梁的

├── /dist/ # 專案輸出目錄 ├── /lib/ # 專案原始碼目錄 │ ├── /cancel/ # 定義取消功能 │ ├── /core/ # 一些核心功能 │ │ ├── axios.js # axios的核心主類 │ │ ├── dispatchrequest.js # 用來呼叫http請求介面卡方法傳送請求 │ │ ├── interceptormanager.js # ***建構函式 │ │ └── settle.js # 根據http響應狀態，改變promise的狀態 │ ├── /helpers/ # 一些輔助方法 │ ├── /adapters/ # 定義請求的介面卡 xhr、http │ │ ├── http.js # 實現http介面卡 │ │ └── xhr.js # 實現xhr介面卡 │ ├── axios.js # 對外暴露介面 │ ├── defaults.js # 預設配置 │ └── utils.js # 公用工具 ├── package.json # 專案資訊 ├── index.d.ts # 配置typescript的宣告檔案

└── index.js # 入口檔案

複製**

注：因為我們需要要看的**都是/lib/目錄下的檔案，所以以下所有涉及到檔案路徑的地方，

我們都會在/lib/下進行查詢

（注：本節可先跳過，後面用到了再過來檢視）

有一些方法在專案中多處使用，簡單介紹下這些方法

bind：給某個函式指定上下文，也就是this指向

bind(fn, context);

複製**

實現效果同function.prototype.bind方法:fn.bind(context)

foreach：遍歷陣列或物件

var utils = require('./utils');
var foreach = utils.foreach;

// 陣列

utils.foreach(, (value, index, array) => {})

// 物件

utils.foreach({}, (value, key, object) => {})

複製**

axios庫外如何新增超時後的處理

axios().catch(error =>  = error;
if (message.indexof('timeout') > -1)
})

複製**

自定義http狀態碼的成功、失敗範圍

如何使用

import axios from
'axios'

axios.defaults.validatestatus = status => status >= 200 && status < 300;

複製**

原始碼分析

在預設配置中，定義了預設的http狀態碼驗證規則，所以自定義validatestatus其實是對此處方法的重寫

// `/lib/defaults.js`
var defaults = ,
// ...
}

複製**

axios是何時開始驗證http狀態碼的？

// 每當 readystate 改變時，就會觸發 onreadystatechange 事件

request[loadevent] = function

handleload()

// ...省略**

var response = ;

settle(resolve, reject, response);

// ...省略**

}複製**

// /lib/core/settle.js

function

settle(resolve, reject, response) else

};複製**

axios這個專案裡，有很多對js使用很巧妙的地方，比如對promise的串聯操作（當然你也可以說這塊是借鑑很多非同步中介軟體的處理方式）,讓我們可以很方便對請求前後的各種處理方法的流程進行控制；很多實用的小優化，比如請求前後的資料處理，省了程式設計師一遍一遍去寫json.***了；同時支援了瀏覽器和node兩種環境，對使用node的專案來說無疑是極好的。

總之，這個能夠在github斬獲42k+（截止2018.05.27）的star，實力絕不是蓋的，值得好好交交心！

Axios原始碼深度剖析

libevent原始碼深度剖析

libevent原始碼深度剖析

libevent原始碼深度剖析

Axios原始碼深度剖析

libevent原始碼深度剖析

libevent原始碼深度剖析

libevent原始碼深度剖析

相關推薦