Axios面試常見問題詳解

axios面試常問題目及其詳解

以下是前端面試中關于 Axios 的常見問題及詳細解答,涵蓋核心原理、實戰場景和進階優化,幫助你在面試中清晰展示技術深度。


1. Axios 是什么?它與原生 Fetch API 有何區別?

回答要點:
  • Axios 是什么:
    Axios 是一個基于 Promise 的 HTTP 客戶端,用于瀏覽器和 Node.js 環境。它封裝了底層的 XMLHttpRequest(瀏覽器)和 http 模塊(Node.js),提供了更簡潔的 API 和豐富的功能(如攔截器、自動轉換 JSON 數據等)。
    在這里插入圖片描述
面試場景:

“在項目中為什么選擇 Axios 而不是 Fetch?”
回答:
“Axios 的攔截器功能可以統一處理認證(如自動附加 Token)、錯誤提示(如 401 跳轉登錄頁)和請求日志,減少重復代碼。此外,Axios 自動轉換 JSON 數據,避免了手動調用 response.json() 的繁瑣操作,尤其在需要兼容 IE 時,Axios 的 Polyfill 支持更友好。”


2. Axios 的攔截器如何工作?實際項目中如何使用?

回答要點:
  • 攔截器類型:
    • 請求攔截器:在請求發送前執行(如附加 Token、修改請求頭)。
    • 響應攔截器:在響應返回后執行(如統一處理錯誤、數據格式化)。
  • 代碼示例:
// 請求攔截器:附加 Token
axiosInstance.interceptors.request.use(config => {const token = localStorage.getItem('token');if (token) config.headers.Authorization = `Bearer ${token}`;return config;
});// 響應攔截器:統一處理錯誤
axiosInstance.interceptors.response.use(response => response.data, // 直接返回數據部分error => {if (error.response?.status === 401) {// 跳轉登錄頁window.location.href = '/login';}return Promise.reject(error);}
);
  • 實際場景:
    • 認證管理:自動附加 Token,避免每個請求手動添加。
    • 錯誤兜底:統一處理 4xx/5xx 錯誤,減少組件內的重復代碼。
    • 數據格式化:后端返回數據包裹在 { code, data, message } 中,攔截器可提取 data 部分。
面試場景:

“如何通過攔截器實現用戶登錄狀態的自動管理?”
回答:
“在請求攔截器中檢查本地存儲的 Token,并附加到請求頭。在響應攔截器中,如果遇到 401 錯誤(Token 過期),自動清除本地 Token 并跳轉登錄頁,無需在每個 API 調用中重復判斷。”


3. 如何用 Axios 取消重復或過時的請求?

回答要點:
  • 取消方式:
    • CancelToken(舊版):
const source = axios.CancelToken.source();
axios.get('/api/data', { cancelToken: source.token });
// 取消請求
source.cancel('用戶取消操作');
2.  AbortController(推薦):
const controller = new AbortController();
axios.get('/api/data', { signal: controller.signal });
// 取消請求
controller.abort('請求超時');
  • 防重復提交:
    通過緩存請求標識(如 URL + 參數 + 時間戳),在攔截器中攔截短時間內重復的請求。
    示例:
const pendingRequests = new Map();
axiosInstance.interceptors.request.use(config => {const requestKey = `${config.url}-${JSON.stringify(config.params)}`;if (pendingRequests.has(requestKey)) {pendingRequests.get(requestKey).abort(); // 取消前一個相同請求}const controller = new AbortController();config.signal = controller.signal;pendingRequests.set(requestKey, controller);return config;
});
axiosInstance.interceptors.response.use(response => {const requestKey = `${response.config.url}-${JSON.stringify(response.config.params)}`;pendingRequests.delete(requestKey); // 請求完成,移除緩存return response;
});
面試場景:

“用戶快速點擊按鈕多次提交表單,如何避免重復請求?”
回答:
“在請求攔截器中生成請求的唯一標識(如 URL + 參數),并用 Map 緩存正在進行的請求。如果相同請求已存在,則調用 AbortController.abort() 取消前一個請求,確保只有最后一次請求被執行。”


4. Axios 如何處理跨域問題?CORS 和 JSONP 的區別?

回答要點:
  • Axios 跨域解決方案:

    • CORS(推薦):后端設置響應頭(如 Access-Control-Allow-Origin),瀏覽器允許跨域請求。
      • 簡單請求:直接發送請求。
      • 預檢請求(Preflight):先發 OPTIONS 請求,后端需支持 OPTIONS 方法并返回允許的跨域頭。
    • 代理服務器:開發時通過 Webpack DevServer 或 Nginx 反向代理,將請求轉發到目標服務器(前端代碼無跨域問題)。
  • CORS vs JSONP:
    |對比項|CORS|JSONP|
    |原理|基于 HTTP 頭部的跨域控制|利用

面試場景:

“項目遇到跨域問題,如何通過 Axios 解決?”
回答:
“如果是開發環境,通過 Webpack DevServer 配置代理,將 API 請求轉發到后端服務器。生產環境則讓后端配置 CORS 頭,允許前端域名訪問。JSONP 僅作為備選方案,因僅支持 GET 且安全性較低。”


5. 如何實現 Axios 的請求重試機制?

回答要點:
  • 實現思路:
    在響應攔截器中捕獲網絡錯誤或特定狀態碼(如 5xx),通過遞歸或定時器重試請求。
    代碼示例:
axiosInstance.interceptors.response.use(null, error => {if (error.code === 'ECONNABORTED' || !error.response) {// 網絡超時或斷開,重試return retryRequest(error.config);}return Promise.reject(error);
});function retryRequest(config, retryCount = 3) {if (retryCount <= 0) return Promise.reject('重試次數耗盡');config.__retryCount = config.__retryCount || 0;config.__retryCount += 1;return new Promise(resolve => {setTimeout(() => {resolve(axiosInstance(config));}, 1000 * config.__retryCount); // 指數退避}).then(response => response).catch(err => retryRequest(config, retryCount - 1));
}
  • 適用場景:
    • 網絡不穩定導致請求失敗。
    • 后端服務臨時不可用(如 502/504 錯誤)。
面試場景:

“如何優化弱網環境下的請求成功率?”
回答:
“通過攔截器實現請求重試機制,結合指數退避策略(如首次重試延遲 1s,第二次 2s),避免短時間內頻繁重試加重服務器負擔。同時限制最大重試次數(如 3 次),防止無限重試。”


6. Axios 的全局配置和實例化配置有何區別?

回答要點:
  • 全局默認配置:
    通過 axios.defaults 設置,影響所有請求(不推薦,易產生沖突)。
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;
  • 實例化配置:
    創建獨立的 Axios 實例,每個實例可單獨配置,避免全局污染。
const apiInstance = axios.create({baseURL: 'https://api.example.com',timeout: 5000,
});
apiInstance.interceptors.request.use(...); // 實例級攔截器
  • 優先級:
    實例配置 > 全局配置 > 請求配置(axios.get(url, { timeout: 10000 }) 可覆蓋實例配置)。
面試場景:

“多個模塊需要調用不同后端 API,如何管理 Axios 配置?”
回答:
“為每個模塊創建獨立的 Axios 實例,分別配置 baseURL 和攔截器。例如,用戶模塊實例指向 /user 接口,支付模塊實例指向 /pay 接口,避免全局配置混亂。”


總結

在面試中回答 Axios 相關問題時,需結合 原理、實戰場景 和 代碼實現,突出以下能力:

  1. 底層機制的理解(如攔截器、取消請求)。
  2. 解決實際問題的經驗(如跨域、重復提交、錯誤處理)。
  3. 代碼設計的規范性(如實例化配置、重試機制)。
    通過清晰的邏輯和具體的例子,可以充分展示你對 Axios 的掌握程度和工程化思維。


下面是一些關于 Axios 在前端面試中常見的問題及其詳解,涵蓋了基礎用法、配置、攔截器、錯誤處理等方面,適合前端開發崗位:


? 基本 Axios 面試題目詳解

1. 什么是 Axios?它有哪些特點?

答案:
Axios 是一個基于 Promise 的 HTTP 客戶端,用于瀏覽器和 Node.js。
特點:

  • 支持 Promise API
  • 支持請求/響應攔截器
  • 請求和響應數據轉換
  • 自動轉換 JSON 數據
  • 防止 CSRF/XSRF 攻擊
  • 客戶端支持取消請求(通過 CancelToken)
  • 支持并發請求(axios.all()

2. Axios 和 Fetch 的區別?

特點AxiosFetch
默認數據格式JSON 自動解析需要手動解析 .json()
請求攔截器支持不支持
響應攔截器支持不支持
超時設置支持需手動實現
請求取消支持 CancelToken需使用 AbortController
瀏覽器兼容性更好較新瀏覽器支持更好

3. 如何配置全局默認值?

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;
axios.defaults.headers.common['Authorization'] = 'Bearer token';

4. Axios 如何設置請求攔截器和響應攔截器?

// 請求攔截器
axios.interceptors.request.use(config => {// 可添加 token 等操作config.headers['X-Custom-Header'] = 'value';return config;
}, error => Promise.reject(error));// 響應攔截器
axios.interceptors.response.use(response => {return response.data; // 直接返回數據部分
}, error => {// 錯誤處理if (error.response) {// 服務端返回錯誤console.error('Error:', error.response.status);} else if (error.request) {// 沒有響應console.error('No response received');} else {console.error('Request setup error:', error.message);}return Promise.reject(error);
});

5. Axios 如何發送 GET、POST 請求?

// GET 請求
axios.get('/user', { params: { id: 1 } });// POST 請求
axios.post('/user', { name: 'John', age: 25 });

6. 如何處理請求錯誤?

axios.get('/user/123').then(response => console.log(response)).catch(error => {if (error.response) {console.log('Status:', error.response.status);console.log('Data:', error.response.data);} else if (error.request) {console.log('No response:', error.request);} else {console.log('Error:', error.message);}});

7. 如何取消 Axios 請求?

const CancelToken = axios.CancelToken;
const source = CancelToken.source();axios.get('/user', {cancelToken: source.token
}).catch(thrown => {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);}
});source.cancel('Request canceled by user');

8. 如何使用 Axios 并發請求?

axios.all([axios.get('/user'),axios.get('/profile')
]).then(axios.spread((userRes, profileRes) => {console.log(userRes.data);console.log(profileRes.data);
}));

9. Axios 如何上傳文件?

const formData = new FormData();
formData.append('file', fileInput.files[0]);axios.post('/upload', formData, {headers: { 'Content-Type': 'multipart/form-data' }
});

10. 如何在 Axios 中設置超時時間?

axios.get('/slow-api', {timeout: 3000 // 毫秒
});

? 高階 Axios 面試題目詳解


1. Axios 請求流程底層是如何工作的?

回答要點:
Axios 封裝了 XMLHttpRequest(瀏覽器端)或 http 模塊(Node.js),主要流程如下:

  1. 創建 Axios 實例(配置合并)。
  2. 執行請求攔截器(通過攔截器鏈)。
  3. 發起請求(瀏覽器中通過 XMLHttpRequest)。
  4. 接收響應并執行響應攔截器。
  5. 返回 Promise。

底層通過一個責任鏈模式(InterceptorManager)來組織攔截器,實際調用棧如下:

dispatchRequest(config) -> xhrAdapter(config) -> new XMLHttpRequest

2. Axios 攔截器是如何實現的?是同步還是異步?

回答要點:

  • 攔截器是通過攔截器鏈(interceptors)維護的:

    axios.interceptors.request.use(fn1);
    axios.interceptors.response.use(fn2);
    
  • 這些攔截器會被組成一個 Promise chain 鏈式結構:

let chain = [dispatchRequest, undefined]; // 核心請求處理
// 前置攔截器從前往后插入
// 后置攔截器從后往前插入// 然后通過 promise 鏈式調用處理請求
  • 所以攔截器是異步可控的 Promise 鏈調用機制

3. Axios 如何實現請求合并或去重(防止重復請求)?

回答要點:

可通過維護一個請求隊列 Map 實現唯一 key:

const pendingMap = new Map();function generateKey(config) {const { url, method, params, data } = config;return `${method}&${url}&${JSON.stringify(params)}&${JSON.stringify(data)}`;
}function addPending(config) {const key = generateKey(config);if (!pendingMap.has(key)) {config.cancelToken = new axios.CancelToken(cancel => {pendingMap.set(key, cancel);});} else {// 取消已有重復請求pendingMap.get(key)();}
}

4. 如何封裝 Axios 支持自動刷新 token(如 401 自動重發)?

回答要點:

  1. 在響應攔截器中捕獲 401。
  2. 發起 refreshToken 請求(需要排隊等待)。
  3. 更新 token 后重放之前失敗的請求。

關鍵代碼片段:

let isRefreshing = false;
let failedQueue = [];axios.interceptors.response.use(res => res,async error => {const originalRequest = error.config;if (error.response.status === 401 && !originalRequest._retry) {if (!isRefreshing) {isRefreshing = true;const newToken = await refreshToken();axios.defaults.headers.common['Authorization'] = `Bearer ${newToken}`;failedQueue.forEach(cb => cb(newToken));failedQueue = [];isRefreshing = false;}return new Promise(resolve => {failedQueue.push(token => {originalRequest.headers['Authorization'] = 'Bearer ' + token;resolve(axios(originalRequest));});});}return Promise.reject(error);}
);

5. Axios 在 Node.js 和瀏覽器中有何差異?

特性瀏覽器端Node.js
請求模塊XMLHttpRequesthttp / https
Cookie自動攜帶需手動配置
XSRF有默認支持需自己配置
適配器xhrAdapterhttpAdapter

Axios 使用的是 adapter 模式:defaultAdapter 會根據運行環境自動選擇。


6. 如何在 Axios 中實現重試機制?

回答要點:

可以通過封裝請求邏輯或使用攔截器實現簡單重試邏輯:

axios.interceptors.response.use(null, async error => {const config = error.config;if (!config || config.__retryCount >= 3) return Promise.reject(error);config.__retryCount = config.__retryCount || 0;config.__retryCount += 1;// 延遲重試await new Promise(res => setTimeout(res, 1000));return axios(config);
});

7. Axios 源碼中的 InterceptorManager 是怎么工作的?

回答要點:

它維護了一個攔截器隊列(handlers 數組),每個元素都有:

{fulfilled: Function,rejected: Function
}

當執行請求時,會將所有攔截器依次插入 Promise 鏈中:

let chain = [...requestInterceptors, dispatchRequest, ...responseInterceptors];

通過 Promise.resolve(config).then(...) 順序執行所有攔截器。


8. Axios 如何實現適配器 Adapter 機制?

回答要點:

const adapter = config.adapter || defaultAdapter;
return adapter(config).then(...)

Axios 默認支持兩種 adapter:

  • xhrAdapter:瀏覽器端用 XMLHttpRequest
  • httpAdapter:Node.js 用 http.request

適配器允許我們定制不同平臺下的請求方式,非常靈活。


9. Axios 如何防止 CSRF 攻擊?

回答要點:

Axios 支持自動攜帶 CSRF Token:

axios.defaults.xsrfCookieName = 'XSRF-TOKEN';
axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';

如果服務端通過 Cookie 設置了 XSRF-TOKEN,Axios 會自動讀取并在請求頭加上 X-XSRF-TOKEN


10. Axios 是如何合并配置項的?為什么有些配置全局無法覆蓋?

回答要點:

Axios 使用 utils.mergeConfig() 深度合并默認配置和實例配置,其中:

  • 一些字段采用深合并(如 headers
  • 一些字段直接覆蓋(如 url, timeout

源碼中的合并策略控制了不同字段的合并行為,導致有時 axios.defaults 無法覆蓋實例設置。


本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/85174.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/85174.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/85174.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

14.2 《3小時從零搭建企業級LLaMA3語言助手:GitHub配置+私有化模型集成全實戰》

3小時從零搭建企業級LLaMA3語言助手&#xff1a;GitHub配置私有化模型集成全實戰 關鍵詞&#xff1a;GitHub 倉庫配置, 項目初始化, 目錄結構設計, 私有化模型集成, 開發環境標準化 Fork 并配置 GitHub 項目倉庫 本節將手把手完成 LanguageMentor 項目的倉庫克隆、環境配置和…

生物制藥自動化升級:Modbus TCP與Ethernet/IP協議轉換實踐

為優化生物制藥生產流程&#xff0c;我司計劃將現有的Allen-Bradley PLC控制系統與新型生物反應器進行集成。由于兩者采用不同的通信協議&#xff08;AB PLC使用Modbus TCP&#xff0c;而生物反應器支持Ethernet/IP&#xff09;&#xff0c;直接通信存在障礙。為此通過穩聯技術…

商業云手機核心優缺點分析

商業云手機核心優缺點分析&#xff0c;綜合技術性能、成本效率及場景適配性等多維度對比&#xff1a; 核心優勢? 成本革命? 硬件零投入?&#xff1a;免除實體手機采購&#xff08;旗艦機均價6000元&#xff09;&#xff0c;企業百臺規模可省60萬 CAPEX。 彈性計費?&…

Windows 遠程桌面添加 SSL 證書指南

Windows 遠程桌面添加 SSL 證書指南 &#x1f9fe; 準備工作&#x1f510; 第一步&#xff1a;使用 Certbot 申請 SSL 證書&#x1f4e6; 第二步&#xff1a;生成 PFX 格式證書文件&#x1f4c1; 第三步&#xff1a;導入證書到 Windows 證書管理器&#x1f512; 第四步&#xf…

項目實訓技術實現——核心關鍵:基于二叉分割的布局生成算法

核心關鍵&#xff1a;基于二叉分割的布局生成算法 上一篇針對llava這種為每個元素分別預測每個元素的框的方法進行了分析&#xff0c;已經證實這條路難以行得通。因此&#xff0c;我們考慮直接按照板塊劃分整個背景布局&#xff0c;然后在板塊內&#xff0c;進一步劃分出我們需…

uniapp 配置devserver代理

在uniapp項目中配置devserver代理&#xff0c;需要先檢查用的vue版本。 vue3不能在manifest.json配置代理。 1.先檢查項目用的vue版本 找到manifest.json文件查看vue的版本。 2.vue2在manifest.json內配置 "h5" : { "devServer": { …

移動端 WebView 頁面性能調試實戰:WebDebugX等工具協同與優化

隨著移動互聯網的發展&#xff0c;越來越多的應用開始使用 WebView 加載網頁內容。然而&#xff0c;這種方式雖然能快速實現跨平臺開發&#xff0c;但也帶來了很多性能瓶頸&#xff0c;尤其是在移動端設備上。WebView 本身的性能限制、頁面加載慢、JS 執行阻塞等問題時常成為開…

臨時文件夾大量0字節xml問題排查

某天偶然打開我的c:\users\我的用戶名\AppData\Local\Temp 目錄&#xff0c;發現有很多0字節的.xml文件&#xff0c;你刪除以后一會還會大量產生&#xff0c;如下圖&#xff1a; 下載了ProcessMonitor&#xff0c;記錄了一會日志&#xff0c;查找*.xml發現是資源管理器在創建這…

突破微小目標檢測瓶頸:智能無人機在藍莓產量估算中的解決方案

【導讀】 本文提出了一種使用搭載計算機視覺的智能無人機估算藍莓產量的方法。系統利用兩個YOLO模型&#xff1a;一個檢測灌木叢&#xff0c;另一個檢測漿果。它們協同工作&#xff0c;智能控制無人機位置和角度&#xff0c;安全獲取灌木近景圖&#xff0c;實現精準的漿果計數…

API 管理系統實踐指南:監控、安全、性能全覆蓋

在數字化轉型和云原生架構全面普及的當下&#xff0c;API&#xff08;應用編程接口&#xff09; 已成為現代技術和業務架構的核心基石。從移動應用到智能硬件&#xff0c;從企業后端系統到 AI 模型調用&#xff0c;幾乎所有系統都在通過 API 實現互聯互通。API 這個詞聽起來有點…

Leetcode-?930. 和相同的二元子數組?

Problem: 930. 和相同的二元子數組 思路 滑動窗口 解題過程 我們可以通過計算 和大于等于 goal 的子數組數目 與 和大于等于 goal1 的子數組數目 的差值&#xff0c;來得到 和恰好等于 goal 的子數組數目。 Code c class Solution { public:int at_most(vector<int>&…

『大模型筆記』第1篇:高效請求排隊:優化大語言模型(LLM)性能

『大模型筆記』高效請求排隊:優化大語言模型(LLM)性能 文章目錄 一. 起點:基礎的推理引擎二. 問題:“重度用戶”會阻塞其他用戶三. 解決方案:公平調度3.1. 擴展思路四. 問題:后端隊列沒有“反壓”機制五. 解決方案:獲取后端指標5.1 擴展思路六. 替代方案:后端優先級調…

Docker Docker Compose 一鍵安裝

目錄 獲取安裝腳本文件執行安裝腳本文件文章結束?? 注意事項&#xff1a;Docker V1 與 V2 的區別 一行命令裝 docker 和 docker compose。 你是否厭倦了在不同的 Linux 系統上一遍又一遍地手動安裝 Docker 和 Docker Compose&#xff1f;&#x1f914; 不論你是 Ubuntu 、Deb…

Java 單例模式實現方式

Java 單例模式實現方式 單例模式是確保一個類只有一個實例&#xff0c;并提供一個全局訪問點的設計模式。以下是 Java 中實現單例模式的幾種常見方式&#xff1a; 1. 餓漢式&#xff08;Eager Initialization&#xff09; public class EagerSingleton {// 類加載時就初始化p…

數字化零售如何全面優化顧客體驗

一、引言 數字化零售是互聯網、大數據、人工智能等技術在零售業中的應用&#xff0c;是現代零售業發展的必然趨勢。隨著線上購物、移動支付和全渠道銷售的普及&#xff0c;零售行業發生了顛覆性的變化。數字化零售不僅提高了企業運營效率&#xff0c;更為顧客提供了便捷、個性化…

rabbitmq 交換機、隊列和消息概念

RabbitMQ 是一個功能強大的消息中間件&#xff0c;它采用發布-訂閱模式進行消息傳遞。下面為你詳細介紹 RabbitMQ 中交換機、隊列和消息的核心概念。 交換機&#xff08;Exchange&#xff09; 交換機在 RabbitMQ 中扮演著接收生產者發送消息的角色&#xff0c;它會根據特定的…

記錄一次jenkins slave因為本地安裝多個java版本導致的問題

今天&#xff0c;使用jenkins打包&#xff0c;發現slave掉線&#xff0c;上對應機器一看&#xff0c;好家伙&#xff0c;slave運行不起來了。命令行&#xff0c;java -vesion. 沒反應&#xff0c;不會是哪個天殺的把java 給卸載了吧&#xff01; 趕緊 where java看下。 還好 ja…

Java中Redis常用的API及其對應的原始API

相信大家寫redis的時候經常忘記一些指令吧[狗頭][狗頭]&#xff0c;這里整理了一下 一、 String&#xff08;字符串類型&#xff09; 1.代碼塊 // 設置字符串值 stringRedisTemplate.opsForValue().set("key", "value"); // Redis: SET key value// 設置…

C#使用ExcelDataReader高效讀取excel文件寫入數據庫

分享一個庫ExcelDataReader &#xff0c;它專注讀取、支持 .xls/.xlsx、內存優化。 首先安裝NuGet 包 dotnet add package ExcelDataReader dotnet add package System.Text.Encoding.CodePages 編碼 內存優化??&#xff1a;每次僅讀取一行&#xff0c;適合處理百萬級數據…

雪豹速清APP:高效清理,暢享流暢手機體驗

在智能手機的日常使用中&#xff0c;隨著時間的推移&#xff0c;手機中會積累大量的垃圾文件&#xff0c;如臨時文件、緩存數據、無用的安裝包等。這些垃圾文件不僅會占用寶貴的存儲空間&#xff0c;還會導致手機運行緩慢&#xff0c;甚至出現卡頓現象。為了解決這一問題&#…