axios異步請求的流程與原理是什么

這篇文章主要介紹了axios異步請求的流程與原理是什么的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇axios異步請求的流程與原理是什么文章都會有所收獲，下面我們一起來看看吧。

一、什么是axios？

axios是一個基于Promise的方法，可以發送get、post等請求，并且前后端都可以使用。

二、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];
  });

關于“axios異步請求的流程與原理是什么”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“axios異步請求的流程與原理是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。