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

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

一、什么是axios？

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

二、axios的內(nèi)部原理

• axios庫對外暴露了一個axios實例，axios實例其中掛載了一個Axios方法，Axios方法有一個interceptors對象(攔截器)，interceptors對象有request對象和response對象，并且request對象和response對象都有use方法，所以，我們可以調(diào)用axios.interceptors.request.use()和axios.interceptors.response.use().

• interceptors對象里面的request對象和response對象其實是一個用來管理攔截器的數(shù)組（handlers）。當(dāng)我們調(diào)用axios.interceptors.request.use()，就會在request的攔截器數(shù)組（handlers）里面push一個成功回調(diào)和一個失敗回調(diào)。每使用一次，就push一次，類似[res1,rej1,res2, rej2…]

• 接下來是一個chain，它是一個存儲所有回調(diào)的數(shù)組，因為它是給Promise使用的，所以它需要使用兩個值，初始值為dispatchRequest和undefiend。接著，Promise.resolve(config).then(fn1, fn2)。當(dāng)config里面的結(jié)果為fulfilled(成功），就把config里的配置傳給fn1并執(zhí)行。如果為reject(報錯)，就把錯誤結(jié)果傳給fn2并執(zhí)行.即Promise.resolve(config).then(chain[0], chain[1])。chain[0]為成功回調(diào)，chain[1]為失敗回調(diào)。config里面有很多配置項，他們可能是一個string值或方法等。

• 接下來是整理所有的Promise,把request數(shù)組里的回調(diào)函數(shù)unshift到chain數(shù)組的最前面，把response數(shù)組里的回調(diào)函數(shù)push到chain數(shù)組的最后面。最終chain數(shù)組里面類似[res2, rej2,res1, rej1, dispatchRequest,undefiend,res3, rej3, res4, rej4]。

• dispatchRequest是用來執(zhí)行axios.request的，dispatchRequest方法里面有一個adapter,它會根據(jù)不同的環(huán)境調(diào)用不同的對象。如果是在瀏覽器環(huán)境下，調(diào)用XMLHttpRequest對象。如果是nodejs環(huán)境下，就調(diào)用http對象。這就是為什么它既能在前端使用，也能在后端使用的原因。adapter會對請求到的數(shù)據(jù)進行解析封裝，封裝后的對象就是我們能看到的response響應(yīng)對象。

• 處理完dispatchRequest，就會執(zhí)行interceptors.response的回調(diào)函數(shù)。這就是為什么我們看到的執(zhí)行順序是，后者的interceptors.request比前者的interceptors.requets先執(zhí)行，接著執(zhí)行axios.request,最后順序執(zhí)行interceptors.response.

• 接下來執(zhí)行我們的業(yè)務(wù)邏輯。

三、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', // 默認(rèn)
	baseURL: '/api',
	//...})

2、通過傳入配置方法

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

四、響應(yīng)模塊

響應(yīng)模塊有以下幾個參數(shù)

{
	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.配置的優(yōu)先級

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

最終timeout設(shè)置的時間是5000，所以這里面的優(yōu)先級，請求里面的配置>實例化配置>axios的默認(rèn)配置

六、Interceptors 攔截器

可以在請求數(shù)據(jù)之前或者接收數(shù)據(jù)之前處理數(shù)據(jù)

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

七、并發(fā)請求處理

// 把axios請求放進函數(shù)里function getUserAccount() {
  return axios.get('/user/12345');}
 function getUserPermissions() {
  return axios.get('/user/12345/permissions');}//函數(shù)執(zhí)行放到Promise里面排隊，挨個響應(yīng)。Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

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