axios面試題詳解

一、axios簡介

axios是一個基於Promise的HTTP客戶端，可以用於瀏覽器和Node.js環境中發送請求。它具有以下幾個特點：

1、支持瀏覽器和Node.js

//axios在瀏覽器和Node.js中均可使用
import axios from 'axios';

axios.get('/user')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2、支持Promise API

//使用Promise API發送請求
axios.get('/user')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3、支持請求和相應攔截器

//使用請求和相應攔截器對請求和響應進行操作
axios.interceptors.request.use(function (config) {
    //在發送請求之前做些什麼
    return config;
  }, function (error) {
    //對請求錯誤做些什麼
    return Promise.reject(error);
});

4、支持取消請求

//通過cancelToken參數來實現取消請求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('請求被取消', thrown.message);
  } else {
    // 處理錯誤
  }
});

// 取消請求（message 參數是可選的）
source.cancel('用戶取消操作');

5、支持多種Content-Type

//使用不同的Content-Type發送請求
axios.post('/user', {
    firstName: 'John',
    lastName: 'Doe'
  }, {
    headers: {
      'Content-Type': 'application/json'
    }
  });

axios.post('/user', new FormData(), {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });

二、axios面試題的解答

以下是面試中可能會遇到的幾個問題，給出解答：

1、axios和fetch的區別是什麼？

axios和fetch都是用於發送請求的工具，它們有以下區別：

1、fetch是瀏覽器原生提供的API，而axios是第三方庫；

2、fetch默認不會帶cookie，需要添加credentials: ‘include’來開啟，而axios默認會攜帶cookie；

3、axios支持IE8+，而fetch不支持IE；

4、axios可以對請求和響應進行攔截，fetch不支持；

5、axios支持在請求參數中添加cancelToken來取消請求，fetch不支持。

2、如何在axios中同時發送多個請求？

axios提供了並發請求的功能，可以使用axios.all或axios.spread方法來同時發送多個請求。其中，axios.all會將多個請求封裝成一個Promise實例，同時觸發所有請求，並等待所有請求都響應之後再返回結果；axios.spread用於將返回的結果數組展開，分別傳入回調函數中。

axios.all([
    axios.get('/user/1'),
    axios.get('/user/2')
  ])
  .then(axios.spread(function (user1, user2) {
    console.log(user1, user2);
  }));

3、如何在axios中設置全局默認的請求頭？

可以使用axios.defaults.headers對象來設置全局默認的請求頭：

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json';

4、如何使用axios.CancelToken取消請求？

使用axios.CancelToken.source()方法可以創建一個cancelToken對象。將cancelToken對象作為請求參數的cancelToken屬性值即可實現取消請求。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('請求被取消', thrown.message);
  } else {
    // 處理錯誤
  }
});

source.cancel('用戶取消操作');

5、如何使用axios實現文件上傳？

可以使用FormData對象來提交文件上傳請求。使用headers配置項中的’Content-Type’為’multipart/form-data’即可實現文件上傳功能。

const formData = new FormData();
formData.append('file', file);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

三、總結

axios是一個功能強大的HTTP客戶端工具，它支持瀏覽器和Node.js環境中發送請求，可以使用Promise API、請求和相應攔截器、取消請求等功能，同時還支持多種Content-Type類型和並發請求。在開發過程中，合理使用axios的功能可以提高開發效率、優化用戶體驗。