axios源碼閱讀

snifes 發(fā)布于2019-08-22 17:22 / 824人閱讀

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

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

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"
  }
});

這一點(diǎn)axios是如何做到的,可以看到instance其實(shí)是一個(gè)綁定this的函數(shù),調(diào)用axios就是調(diào)用context.request

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

var axios = createInstance(defaults);

接下來我們看一下request方法，所有http請求的發(fā)送都會調(diào)用Axios.prototype.request，這個(gè)函數(shù)可以認(rèn)為是整個(gè)axios的骨架，非常重要。

Axios.prototype.request = function request(config) {
    // 每個(gè)請求都會重新合成一個(gè)config,所以通過操作config對象，你可以標(biāo)識請求，做某些操作，事實(shí)上每個(gè)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;
}

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

發(fā)送請求的整個(gè)執(zhí)行順序是，requestInterceptors ——》dispatchRequest ——》responseInterceptors

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

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

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

看一下，不同的http method是怎么復(fù)用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發(fā)送請求,axios默認(rèn)內(nèi)置兩個(gè)adapter,一個(gè)是負(fù)責(zé)在brower發(fā)送請求的，一個(gè)是負(fù)責(zé)在node端發(fā)送請求，可以在根文件的defaults下看到

構(gòu)造響應(yīng)數(shù)據(jù)

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

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

響應(yīng)的攔截器接收到的是response對象

至此，我們已經(jīng)把a(bǔ)xios的核心邏輯閱讀完畢，從中我們也可以看到axios的易用性和可拓展性非常強(qiáng)。

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

云服務(wù)器 GPU云服務(wù)器源碼閱讀 webrtc源碼閱讀 hbase源碼閱讀如何閱讀java源碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95113.html

發(fā)表評論

登陸后可評論

0條評論

snifes

男|高級講師

我要關(guān)注我要私信

TA的文章

如何保證消息隊(duì)列的可靠性傳輸？

閱讀 3334·2021-11-22 12:04
垂直水平居中的方式總結(jié) +（使用場景）

閱讀 2718·2019-08-29 13:49
(a== 1 && a ==2 && a==3) ever eval

閱讀 491·2019-08-26 13:45
html+css+js+Hbuilder開發(fā)一款安卓APP，根本不用學(xué)Android開發(fā)！

閱讀 2249·2019-08-26 11:56
每周一點(diǎn)canvas動畫——《支付寶價(jià)格拖動選擇》

閱讀 1007·2019-08-26 11:43
簡單HTML5移動端（客戶端）圖片上傳

閱讀 601·2019-08-26 10:45
前端開發(fā)面試題鏈接

閱讀 1275·2019-08-23 16:48
小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動

閱讀 2164·2019-08-23 16:07

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

axios源碼閱讀

相關(guān)文章