axios源碼閱讀

snifes 發布于2019-08-22 17:22 / 816人閱讀

摘要：響應的攔截器接收到的是對象至此，我們已經把的核心邏輯閱讀完畢，從中我們也可以看到的易用性和可拓展性非常強。尤其是可拓展性，發送請求到接收響應的過程中的所有部分幾乎都是可拓展的，尤其是，，留下了很多想象的空間。

為了方便使用,axios對象既能做對象使用，又能做函數使用.

axios.post("/user", {
    firstName: "Fred",
    lastName: "Flintstone"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
axios({
  method: "post",
  url: "/user/12345",
  data: {
    firstName: "Fred",
    lastName: "Flintstone"
  }
});

這一點axios是如何做到的,可以看到instance其實是一個綁定this的函數,調用axios就是調用context.request

function createInstance(){
    // 能當做函數使用的秘密
    var instance = bind(Axios.prototype.request, context);
    // 能當做對象使用的秘密
    utils.extend(instance, Axios.prototype, context);
    // 要拿到構造函數繼承的屬性
    utils.extend(instance, context);
    return instance
}

var axios = createInstance(defaults);

接下來我們看一下request方法，所有http請求的發送都會調用Axios.prototype.request，這個函數可以認為是整個axios的骨架，非常重要。

Axios.prototype.request = function request(config) {
    // 每個請求都會重新合成一個config,所以通過操作config對象，你可以標識請求，做某些操作，事實上每個axios的攔截器都能拿到config對象
    config = utils.merge(defaults, this.defaults, { method: "get" }, config);
    
    // 掛載攔截器的主要邏輯
    var chain = [dispatchRequest, undefined];
    var promise = Promise.resolve(config);
    
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });

  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
    chain.push(interceptor.fulfilled, interceptor.rejected);
  });

  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }

  return promise;
}

從攔截器中的主要邏輯，我們可以得到以下幾點:

發送請求的整個執行順序是，requestInterceptors ——》dispatchRequest ——》responseInterceptors

攔截器最初接收的對象是config，axios使用中也規定，請求的攔截器必須要返回config，這也是每個請求攔截器的函數參數是config的原因

攔截器的執行順序與interceptors.request.use(function () {/*...*/})執行的順序有關,即先use的請求攔截器會先執行。

如果攔截器中的函數時async函數，會阻塞整個攔截器鏈的執行，而transformData不會，所以如果需要對請求的數據做異步處理的話，要在攔截器中完成。

看一下，不同的http method是怎么復用request方法的

utils.forEach(["delete", "get", "head", "options"], function forEachMethodNoData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url
    }));
  };
});

utils.forEach(["post", "put", "patch"], function forEachMethodWithData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, data, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url,
      data: data
    }));
  };
});

接下來我們看dispatchRequest的核心邏輯：

// 處理config...

var adapter = config.adapter || defaults.adapter;

return adapter(config).then(function onAdapterResolution(response) {
throwIfCancellationRequested(config);

// Transform response data
response.data = transformData(
  response.data,
  response.headers,
  config.transformResponse
);

return response;
}, function onAdapterRejection(reason) {
if (!isCancel(reason)) {
  throwIfCancellationRequested(config);

  // Transform response data
  if (reason && reason.response) {
    reason.response.data = transformData(
      reason.response.data,
      reason.response.headers,
      config.transformResponse
    );
  }
}

return Promise.reject(reason);
});

可以看到dispatchRequest的核心邏輯大概有三步

處理config

使用adapter發送請求,axios默認內置兩個adapter,一個是負責在brower發送請求的，一個是負責在node端發送請求，可以在根文件的defaults下看到

構造響應數據

所以通過dispatchRequest方法的閱讀，我們可以得到以下啟示:

adapter是可以替換的，所以如果你覺得你的xhr或http的邏輯更適合業務的需要，完全可以替換掉，你也完全可以開發出第三種adapter以處理特定情況，比如開發一個處理緩存的adapter，事實上我現在的項目就是這樣做的。

響應的攔截器接收到的是response對象

至此，我們已經把axios的核心邏輯閱讀完畢，從中我們也可以看到axios的易用性和可拓展性非常強。

尤其是可拓展性，發送請求到接收響應的過程中的所有部分幾乎都是可拓展的，尤其是config，adapter，interceptor留下了很多想象的空間。

云服務器 GPU云服務器源碼閱讀 webrtc源碼閱讀 hbase源碼閱讀如何閱讀java源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95113.html

axios源碼閱讀（一）

摘要：開始研究核心代碼這個類首先是構造函數看完上面的內容大家應該有點印象，上掛了和，是默認的配置，顧名思義就是攔截器，目測包含了和兩種類型。喜歡就點個贊吧參考文章源代碼重點難點分析源代碼重點難點分析 axios是一個基于promise的http庫，支持瀏覽器和node端，最近我在做beauty-we的api設計，研讀一個成熟的http庫勢在必行，axios功能完整、api簡潔、注釋清晰，再適...

k00baa 2019-08-22 18:26 評論0 收藏0
記一次eggjs+axios傳輸multipart的糾錯過程

摘要：總所周知，的策略讓每次都要發送碼驗證，為了方便，我在的里作了前置攔截。結果不幸從此發生最開始沒有看官方文檔，以為應該加在里面，又沒有考慮到要上傳格式的文檔，所以直接結果發送的是。這很正常，閱讀源碼知為時會自動添加的頭。不加又以上傳了。總所周知，egg的csrf策略讓post每次都要發送token碼驗證，為了方便，我在axios的interceptor里作了前置攔截。結果不幸從此發生...

CarterLi 2019-08-26 13:58 評論0 收藏0
Axios源碼深度剖析 - AJAX新王者

摘要：我們先來看看構造函數構造函數就是用來實現攔截器的，這個構造函數原型上有個方法。關于源碼，其實是比較簡單的，都是用來操作該構造函數的實例屬性的。存放攔截器方法，數組內每一項都是有兩個屬性的對象，兩個屬性分別對應成功和失敗后執行的函數。 Axios源碼分析 - XHR篇文章源碼托管在github上，歡迎fork指正！ axios 是一個基于 Promise 的http請求庫，可以用在瀏覽...

DangoSky 2019-08-22 17:34 評論0 收藏0
Vue2.0—仿知乎日報總結

摘要：一個基于全家桶開發的仿知乎日報單頁應用項目地址源碼地址項目在線地址在線地址模式下推薦使用移動端模式瀏覽去觀看如果覺得做得還不錯或者項目源碼對您有幫助希望您小抬右手到右上角點一個您的支持是作者長期更新維護的動力項目起源從二月份開始學習學習了 Vue-News 一個基于vue全家桶開發的仿知乎日報單頁應用項目github地址:源碼地址項目在線地址:在線地址 (PC模式下推薦使用chro...

lentoo 2019-08-20 16:18 評論0 收藏0
sau交流學習社區--看小說的lovebook一個無線端BS應用

摘要：愛上閱讀，是一款的讀小說等書籍的并且閱讀的應用。找了好久發現發現只有追書神器的暴露出來了，起點之類的找不到。八最后最后打個小廣告源碼都已在上開源，目前在逐步完善功能中。歡迎感興趣的同學和。 loveBook loveBook愛上閱讀，是一款webapp的讀小說等書籍的并且閱讀的應用。如果覺得可以，歡迎fork和star。自己最近在追斗破蒼穹電視劇，下班時候在地鐵上總聽到有人說，斗破蒼...

leeon 2019-08-23 13:47 評論0 收藏0