[[421684]]

一、領(lǐng)悟思想

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

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

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

• 支持Promise API，可以方便進(jìn)行鏈?zhǔn)秸{(diào)用;
• 支持請求和響應(yīng)攔截器，該攔截器將Node中中間件思想引入該庫，在請求發(fā)送之前和響應(yīng)接收之后可以對其進(jìn)行處理。
• 支持?jǐn)?shù)據(jù)轉(zhuǎn)換器，轉(zhuǎn)換器主要負(fù)責(zé)數(shù)據(jù)發(fā)送前以及響應(yīng)接收后對數(shù)據(jù)的處理。

二、把握設(shè)計

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

2.1 源碼目錄

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

2.2 抽象接口

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

2.3 設(shè)計原理

首先看一段代碼，這段代碼的執(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); 
    } 
); 
 
// 響應(yīng)攔截器一 
axios.interceptors.response.use( 
    response => { 
        console.log('響應(yīng)攔截器一', response); 
        return response; 
    }, 
    error => { 
        console.log('response interceptor rejected1'); 
        return Promise.reject(error); 
    } 
); 
 
// 響應(yīng)攔截器二 
axios.interceptors.response.use( 
    response => { 
        console.log('響應(yīng)攔截器二', response); 
        return response; 
    }, 
    error => { 
        console.log('response interceptor rejected2'); 
        return Promise.reject(error); 
    } 
); 
 
axios('/', { 
    method: 'post', 
    headers: { 
        'Content-Type': 'application/json' 
    }, 
    data: { 
        test: 'test' 
    }, 
    // 請求轉(zhuǎn)換器 
    transformRequest: [(data, headers) => { 
        console.log('請求轉(zhuǎn)換器', data); 
        return JSON.stringify(data) 
    }], 
    // 響應(yīng)轉(zhuǎn)換器 
    transformResponse: [(response, headers) => { 
        console.log('響應(yīng)轉(zhuǎn)換器', response); 
        return response; 
    }] 
}) 
.then((response) => { 
    console.log(response.data) 
}) 

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

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

其核心原理就是這個嗎?是的，你沒有看錯，這就是Axios的核心設(shè)計原理，通過一系列鏈?zhǔn)降奶幚砭湍軌虻玫剿枰慕Y(jié)果。

三、體會細(xì)節(jié)

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

3.1 整體運行流程

在第二章中闡述了該核心原理，老鐵們一定對該整體是如何運轉(zhuǎn)起來的很感興趣吧，下面就來解答各位老鐵的疑惑——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 
  // …… 
 
  // ****核心**** 
  // 存儲該調(diào)用鏈的數(shù)組 
  var chain = [dispatchRequest, undefined]; 
  var promise = Promise.resolve(config); 
 
  // 將請求攔截器的內(nèi)容塞到數(shù)組前面（注意用的unshift函數(shù)，這就很好的解釋了為什么先調(diào)用的請求攔截器后執(zhí)行） 
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) { 
    chain.unshift(interceptor.fulfilled, interceptor.rejected); 
  }); 
  // 將響應(yīng)攔截器的內(nèi)容塞到數(shù)組后面 
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) { 
    chain.push(interceptor.fulfilled, interceptor.rejected); 
  }); 
   
  // 利用Promise將整個數(shù)組中的內(nèi)容串起來，這樣就可以按照順序鏈?zhǔn)綀?zhí)行了 
  while (chain.length) { 
    promise = promise.then(chain.shift(), chain.shift()); 
  } 
 
  return promise; 
}; 

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

3.2 請求/響應(yīng)攔截器

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

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

先拋出請求/響應(yī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; 
  } 
}; 
 
// 對攔截器進(jìn)行分發(fā) 
InterceptorManager.prototype.forEach = function forEach(fn) { 
  utils.forEach(this.handlers, function forEachHandler(h) { 
    if (h !== null) { 
      fn(h); 
    } 
  }); 
}; 

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

3.3 dispatchRequest是個啥

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

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

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

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

3.4 請求/響應(yīng)數(shù)據(jù)轉(zhuǎn)換器

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

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

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

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

響應(yīng)數(shù)據(jù)轉(zhuǎn)換調(diào)用類似于請求數(shù)據(jù)轉(zhuǎn)換調(diào)用,對響應(yīng)體進(jìn)行一系列的處理(transformResponse為處理函數(shù)的數(shù)組，defaults中包含默認(rèn)的配置)

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

四、結(jié)語

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

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

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