[[421684]]

一、領悟思想

Axios是一個基于Promise的HTTP庫，根據(jù)官網(wǎng)介紹，有以下幾個特點：

• 在瀏覽器端會創(chuàng)建XMLHttpRequests
• 在Node端會創(chuàng)建HTTP請求
• 由于Axios是一個基于Promise的HTTP庫，所以其支持Promise API
• 支持請求和響應攔截器
• 支持請求和響應數(shù)據(jù)轉換
• 支持取消請求
• 自動轉換JSON數(shù)據(jù)
• 客戶端支持防御XSRF攻擊

通過上述官網(wǎng)介紹的特點，我認為其突出的優(yōu)點有三個：

• 支持Promise API，可以方便進行鏈式調用;
• 支持請求和響應攔截器，該攔截器將Node中中間件思想引入該庫，在請求發(fā)送之前和響應接收之后可以對其進行處理。
• 支持數(shù)據(jù)轉換器，轉換器主要負責數(shù)據(jù)發(fā)送前以及響應接收后對數(shù)據(jù)的處理。

二、把握設計

理解了該庫設計的特點，下面從源碼目錄、抽象接口及核心設計原理三個層面對Axios進行整體的把握。

2.1 源碼目錄

如下所示是Axios的源碼目錄及各個文件的作用

2.2 抽象接口

對源碼的目錄有了一定了解，下面利用UML類圖對該系統(tǒng)各個模塊的依賴關系進一步了解，為后續(xù)源碼分析打好基礎。(看該圖注意對著源碼一起看)

2.3 設計原理

首先看一段代碼，這段代碼的執(zhí)行順序包含著Axios的核心原理。

axios.defaults.baseURL = 'http://localhost:8080' 
 
// 請求攔截器一 
axios.interceptors.request.use( 
    config => { 
        console.log('請求攔截器一', config); 
        return config; 
    }, 
    error => { 
        console.log('request interceptor rejected1'); 
        return Promise.reject(error); 
    } 
); 
 
// 請求攔截器二 
axios.interceptors.request.use( 
    config => { 
        console.log('請求攔截器二', config); 
        return config; 
    }, 
    error => { 
        console.log('request interceptor rejected2'); 
        return Promise.reject(error); 
    } 
); 
 
// 響應攔截器一 
axios.interceptors.response.use( 
    response => { 
        console.log('響應攔截器一', response); 
        return response; 
    }, 
    error => { 
        console.log('response interceptor rejected1'); 
        return Promise.reject(error); 
    } 
); 
 
// 響應攔截器二 
axios.interceptors.response.use( 
    response => { 
        console.log('響應攔截器二', response); 
        return response; 
    }, 
    error => { 
        console.log('response interceptor rejected2'); 
        return Promise.reject(error); 
    } 
); 
 
axios('/', { 
    method: 'post', 
    headers: { 
        'Content-Type': 'application/json' 
    }, 
    data: { 
        test: 'test' 
    }, 
    // 請求轉換器 
    transformRequest: [(data, headers) => { 
        console.log('請求轉換器', data); 
        return JSON.stringify(data) 
    }], 
    // 響應轉換器 
    transformResponse: [(response, headers) => { 
        console.log('響應轉換器', response); 
        return response; 
    }] 
}) 
.then((response) => { 
    console.log(response.data) 
}) 

寫了這么多代碼，大家肯定對這段代碼的執(zhí)行結果很感興趣，為了滿足各位看客的好奇心，下面就直接拋出來這段結果。

不過單看執(zhí)行結果也不能了解其核心設計原理呀，老鐵別急，其實小小代碼就已經(jīng)包含了Axios的整個執(zhí)行過程，通過觀察結果及代碼可以將整個過程簡化為下圖：

其核心原理就是這個嗎?是的，你沒有看錯，這就是Axios的核心設計原理，通過一系列鏈式的處理就能夠得到所需要的結果。

三、體會細節(jié)

宏觀的事聊完了，下面就詳細聊幾個核心細節(jié)吧：整個流程、請求/響應攔截器、dispatchRequest是個啥、請求/響應數(shù)據(jù)轉換器。

3.1 整體運行流程

在第二章中闡述了該核心原理，老鐵們一定對該整體是如何運轉起來的很感興趣吧，下面就來解答各位老鐵的疑惑——Axios

function Axios(instanceConfig) { 
  this.defaults = instanceConfig; 
  // 攔截器實例化 
  this.interceptors = { 
    request: new InterceptorManager(), 
    response: new InterceptorManager() 
  }; 
} 
 
// 通過一系列的繼承綁定操作，該函數(shù)其實就是axios函數(shù) 
Axios.prototype.request = function request(config) { 
  // …… 
  config = mergeConfig(this.defaults, config); 
 
  // Set config.method 
  // …… 
 
  // ****核心**** 
  // 存儲該調用鏈的數(shù)組 
  var chain = [dispatchRequest, undefined]; 
  var promise = Promise.resolve(config); 
 
  // 將請求攔截器的內(nèi)容塞到數(shù)組前面（注意用的unshift函數(shù)，這就很好的解釋了為什么先調用的請求攔截器后執(zhí)行） 
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) { 
    chain.unshift(interceptor.fulfilled, interceptor.rejected); 
  }); 
  // 將響應攔截器的內(nèi)容塞到數(shù)組后面 
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) { 
    chain.push(interceptor.fulfilled, interceptor.rejected); 
  }); 
   
  // 利用Promise將整個數(shù)組中的內(nèi)容串起來，這樣就可以按照順序鏈式執(zhí)行了 
  while (chain.length) { 
    promise = promise.then(chain.shift(), chain.shift()); 
  } 
 
  return promise; 
}; 

是不是很巧妙?通過利用數(shù)組先來存儲需要的內(nèi)容，先處理的在數(shù)組的前面(請求攔截器)，后處理的在數(shù)組的后面(響應攔截器)，然后利用Promise將整個內(nèi)容串起來，很好的處理網(wǎng)絡請求屬于異步的問題——Perfect。

3.2 請求/響應攔截器

通過觀察第二部分的執(zhí)行結果我們已經(jīng)了解了請求/響應攔截器，下面就做一下總結：

• 請求攔截器就是在發(fā)送請求前執(zhí)行的回調函數(shù)，個人認為其最大功用就是對多個請求的配置進行統(tǒng)一修改
• 仔細觀察發(fā)現(xiàn)請求攔截器1先加入但是后執(zhí)行，是不是與整體運行流程中的代碼對上了。
• 響應攔截器就是在請求得到響應后執(zhí)行的回調函數(shù)，成功回調的參數(shù)就是響應response，其可以對多個請求的響應進行統(tǒng)一修改。

先拋出請求/響應攔截器的核心代碼

function InterceptorManager() { 
  this.handlers = []; 
} 
 
// 注冊攔截器 
InterceptorManager.prototype.use = function use(fulfilled, rejected) { 
  this.handlers.push({ 
    fulfilled: fulfilled, 
    rejected: rejected 
  }); 
  return this.handlers.length - 1; 
}; 
 
// 刪除攔截器 
InterceptorManager.prototype.eject = function eject(id) { 
  if (this.handlers[id]) { 
    this.handlers[id] = null; 
  } 
}; 
 
// 對攔截器進行分發(fā) 
InterceptorManager.prototype.forEach = function forEach(fn) { 
  utils.forEach(this.handlers, function forEachHandler(h) { 
    if (h !== null) { 
      fn(h); 
    } 
  }); 
}; 

看看攔截器的核心源碼，是不是發(fā)現(xiàn)與一種設計模式很像?對的，就是觀察者模式。當調用use方法的時候就會將回調函數(shù)(成功、失敗)保存至handlers屬性上，方便后期的調用;當調用eject方法的時候就會刪除對應索引位置回調函數(shù);當調用forEach方法的時候就會就會對handlers屬性(存儲的攔截器回調)中的內(nèi)容進行分發(fā)。

3.3 dispatchRequest是個啥

前面聊了整個請求的請求前(請求攔截器)和請求后(響應攔截器)，是不是感覺少點東西，如何發(fā)請求，這就是我們本次要與大家一起嘮的dispatchRequest(config)。

module.exports = function dispatchRequest(config) { 
  // …… 
 
  //請求數(shù)據(jù)轉換 
  config.data = transformData( 
    config.data, 
    config.headers, 
    config.transformRequest 
  ); 
  // …… 
   
  // 獲取適配器：自己配置了就選自己的，自己沒有設置就選默認的（瀏覽器端就選xhrAdapter、node端就選httpAdapter；這也就是為什么Axios即支持瀏覽器又支持Node的原因） 
  var adapter = config.adapter || defaults.adapter; 
 
  return adapter(config).then(function onAdapterResolution(response) { 
    // …… 
 
    // 響應數(shù)據(jù)轉換器 
    response.data = transformData( 
      response.data, 
      response.headers, 
      config.transformResponse 
    ); 
 
    return response; 
  }, function onAdapterRejection(reason) { 
    if (!isCancel(reason)) { 
      // …… 
 
      // 響應數(shù)據(jù)轉換器 
      if (reason && reason.response) { 
        reason.response.data = transformData( 
          reason.response.data, 
          reason.response.headers, 
          config.transformResponse 
        ); 
      } 
    } 
 
    return Promise.reject(reason); 
  }); 
}; 

通過觀察整個請求流程中的中間環(huán)節(jié)——dispatchRequest，它一共做了三件事：

• 調用請求數(shù)據(jù)轉換器轉換請求數(shù)據(jù)
• 選擇合適的適配器發(fā)起請求——自己配置了就選自己的，自己沒有配置就選默認的(瀏覽器端就選xhrAdapter、node端就選httpAdapter;這也就是為什么Axios即支持瀏覽器又支持Node的原因)
• 當請求數(shù)據(jù)返回后，調用響應數(shù)據(jù)轉換器轉換響應數(shù)據(jù)

3.4 請求/響應數(shù)據(jù)轉換器

既然3.3中提到了請求/響應轉換器，本節(jié)就來聊一聊它倆。

// 核心源碼 
module.exports = function transformData(data, headers, fns) { 
  utils.forEach(fns, function transform(fn) { 
    data = fn(data, headers); 
  }); 
 
  return data; 
}; 

請求數(shù)據(jù)轉換調用，實質上就是利用請求數(shù)據(jù)轉換器對請求頭和請求數(shù)據(jù)進行特定的處理(transformRequest為處理函數(shù)的數(shù)組，defaults中包含默認的配置)

config.data = transformData( 
  config.data, 
  config.headers, 
  config.transformRequest 
); 

響應數(shù)據(jù)轉換調用類似于請求數(shù)據(jù)轉換調用,對響應體進行一系列的處理(transformResponse為處理函數(shù)的數(shù)組，defaults中包含默認的配置)

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

四、結語

上述三章對Axios進行整體的分析，從Axios的特點、整體設計及關鍵環(huán)節(jié)三個方面進行了講述，通過閱讀源碼學到了很多知識，也能夠更加熟練的使用Axios。為了保證各位老鐵的學習Axios源碼的效果，對學習Axios源碼的兩條建議：

邊閱讀本文邊看源碼，能夠有更深入的理解。

不要糾結于具體的實現(xiàn)，從宏觀的角度去看源碼，這樣能夠節(jié)省大量時間。