深析axios非同步請求的流程與原理

一、什麼是axios？

axios是基於Promise的方法，可以發送get、post等請求，並且前後端都可以使用。 【推薦：Ajax影片教學，web前端】

#二、axios的內部原理

• ##axios庫對外暴露了一個axios實例，axios實例其中掛載了一個Axios方法，Axios方法有一個

  interceptors物件(攔截器)，interceptors物件有request物件和response物件，並且request物件和response物件都有use方法，所以，我們可以呼叫axios.interceptors.request.use()和axios.interceptors .response.use().

• interceptors物件裡面的request物件和response物件其實是一個用來管理攔截器的陣列（handlers）。當我們呼叫axios.interceptors.request.use()，就會在request的攔截器數組（handlers）裡面push一個成功回調和一個失敗回調。每使用一次，就push一次，類似[res1,rej1,res2, rej2…]

• #接下來是一個chain，

  它是一個儲存所有回呼的陣列，因為它是給Promise使用的，所以它需要使用兩個值，初始值為dispatchRequest和undefiend。接著，Promise.resolve(config).then(fn1, fn2)。當config裡面的結果是fulfilled(成功），就把config裡的設定傳給fn1並執行。如果為reject(報錯)，就把錯誤結果傳給fn2並執行.即Promise.resolve(config).then(chain[0], chain[1])。 chain[0]為成功回調，chain[1]為失敗回呼。 config裡面有很多設定項，他們可能是string值或方法等。

• 接下來是整理所有的Promise,把

  request陣列裡的回呼函數unshift到chain陣列的最前面，把response數組裡的回呼函數push到chain數組的最後面。最終chain數組裡面類似[res2, rej2,res1, rej1, dispatchRequest,undefiend,res3, rej3, res4, rej4]。

• dispatchRequest是用來執行axios.request的，dispatchRequest方法裡面有一個adapter,它會根據不同的環境呼叫不同的物件。如果是在瀏覽器環境下，呼叫XMLHttpRequest物件。如果是nodejs環境下，就呼叫http物件。這就是為什麼它既能在前端使用，也能在後端使用的原因。 adapter會對請求到的資料進行解析封裝，封裝後的物件就是我們能看到的response回應物件。

• 處理完

  dispatchRequest，就會執行interceptors.response的回呼函數。這就是為什麼我們看到的執行順序是，後者的interceptors.request#比前者的interceptors.requets先執行，接著執行axios.request,最後順序執行interceptors.response.

• 接下來執行我們的業務邏輯。

三、axios的使用

1、透過使用axios的方法

常用方法：get, post, request

axios.get

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

axios.post#

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.request##可以傳入很多請求配置

axios.request({
	url: '/user',
	method: 'get', // 默认
	baseURL: '/api',
	//...})

2、透過傳入配置方法

axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

四、回應模組

回應模組有以下幾個參數

{
	data: {},
	status: 200,
	statusText: 'ok'，
	header: {},
	config: {},
	request: {}}

五、設定

1.全域axios的設定

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2.實例的設定

##

const instance = axios.create({
  baseURL: 'https://api.example.com'});
 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

3.配置的優先權

const instance = axios.create();instance.defaults.timeout = 2500;instance.get('/longRequest', {
  timeout: 5000});

最終timeout設定的時間是5000，所以這裡面的優先權，請求裡面的設定>實例化設定>axios的預設設定六、Interceptors 攔截器

可以在請求資料之前或接收資料之前處理資料

axios.interceptors.request.use(function (config) {
    return config;
  }, function (error) {
    return Promise.reject(error);
  });
  axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    return Promise.reject(error);
  });

七、並發請求處理

// 把axios请求放进函数里function getUserAccount() {
  return axios.get('/user/12345');}
 function getUserPermissions() {
  return axios.get('/user/12345/permissions');}//函数执行放到Promise里面排队，挨个响应。Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

參考文件：https ://www.npmjs.com/package/axios

以上是深析axios非同步請求的流程與原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！