Axios 知識點全面總結

文章目錄

  • Axios 知識點全面總結
    • 一、Axios 基礎概念
      • 1. 什么是 Axios？
      • 2. 核心特性
    • 二、安裝與基本用法
      • 1. 安裝
      • 2. 基本請求示例
    • 三、請求方法與參數
    • 四、請求配置選項（config）
    • 五、攔截器（Interceptors）
    • 六、錯誤處理
    • 七、取消請求
    • 八、并發請求
    • 九、創建實例（Instance）
    • 十、與框架集成
    • 十一、最佳實踐與常見問題
    • 十二、TypeScript 支持
    • 十三、Axios 調用后端全局 API
      • 1、全局方法 httpClient.js
      • 2、四種 HTTP 方法 封裝 api.js
      • 3、使用封裝方法 userService.js

Axios 知識點全面總結

一、Axios 基礎概念

1. 什么是 Axios？

Axios 是一個 基于 Promise 的 HTTP 客戶端庫，用于瀏覽器和 Node.js 環境中發送 HTTP 請求。它支持 請求 / 響應攔截、請求取消、Promise 鏈式調用 等特性，是前端開發中最常用的 HTTP 庫之一。

2. 核心特性

  • 支持瀏覽器和 Node.js 環境
  • 基于 Promise 實現，支持 async/await
  • 提供請求 / 響應攔截器，方便處理請求和響應數據
  • 支持請求取消（通過 CancelToken 或 AbortController）
  • 自動轉換請求和響應數據（JSON 數據處理）
  • 支持請求超時設置、自定義請求頭、并發請求等

二、安裝與基本用法

1. 安裝

# 通過 npm 安裝
npm install axios# 通過 yarn 安裝
yarn add axios# 瀏覽器直接引入（CDN）
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. 基本請求示例

// 發送 GET 請求
axios.get('/api/data').then(response => {console.log(response.data);}).catch(error => {console.error('請求錯誤:', error);});// 發送 POST 請求
axios.post('/api/user', {name: '張三',age: 25
})
.then(response => {console.log(response.data);
})
.catch(error => {console.error('請求錯誤:', error);
});// 使用 async/await
async function fetchData() {try {const response = await axios.get('/api/data');return response.data;} catch (error) {throw new Error('獲取數據失敗: ' + error.message);}
}

三、請求方法與參數

方法描述參數格式
axios.get(url[, config])發送 GET 請求（獲取資源）url, config（可選配置）
axios.post(url[, data, config])發送 POST 請求（提交資源）url, data（請求體）, config
axios.put(url[, data, config])發送 PUT 請求（更新資源）url, data, config
axios.delete(url[, config])發送 DELETE 請求（刪除資源）url, config
axios.head(url[, config])發送 HEAD 請求（獲取資源頭部信息）url, config
axios.patch(url[, data, config])發送 PATCH 請求（部分更新資源）url, data, config

示例：帶參數的 GET 請求

// 方式一：通過 params 參數傳遞查詢參數
axios.get('/api/users', {params: {id: 1,name: '張三'}
})// 方式二：直接拼接 URL（不推薦，手動處理編碼）
axios.get('/api/users?id=1&name=張三')

四、請求配置選項（config）

Axios 的請求配置可用于自定義請求行為，常用配置如下：

  • 基礎配置
{url: '/api/data',             // 請求 URLmethod: 'get',                // 請求方法（get/post/put等）baseURL: 'https://api.example.com', // 基礎 URL，會與 url 拼接timeout: 5000,                // 請求超時時間（毫秒），超過則報錯withCredentials: true,        // 是否攜帶 cookie（跨域請求時）responseType: 'json',         // 響應數據類型（json/blob/text等）headers: { 'X-Custom-Header': 'value' }, // 請求頭
}
  • 請求數據相關
{data: { key: value },         // POST/PUT 等請求的請求體數據params: { id: 1 },            // GET 請求的查詢參數paramsSerializer: function(params) {// 自定義參數序列化方式return Qs.stringify(params, { arrayFormat: 'brackets' });}
}

五、攔截器（Interceptors）

攔截器用于在請求發送前或響應接收后統一處理數據，分為 請求攔截器 和 響應攔截器。

  1. 請求攔截器
// 添加請求攔截器
axios.interceptors.request.use(config => {// 在請求發送前做些什么（如添加 token、修改請求頭）const token = localStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},error => {// 處理請求錯誤return Promise.reject(error);}
);
  1. 響應攔截器
// 添加響應攔截器
axios.interceptors.response.use(response => {// 對響應數據做統一處理（如錯誤碼判斷、數據格式化）const { data } = response;if (data.code !== 200) {// 錯誤處理（如提示用戶、跳轉登錄頁）throw new Error(data.message || '請求失敗');}return data; // 直接返回處理后的數據，簡化后續 then 操作},error => {// 處理響應錯誤（如網絡錯誤、404、500 等）const { response } = error;if (response) {// 響應已接收但狀態碼非 2xxswitch (response.status) {case 401:console.log('未授權，請重新登錄');break;case 404:console.log('資源不存在');break;default:console.log('服務器錯誤');}} else {// 網絡錯誤（如超時、斷網）console.log('網絡連接失敗');}return Promise.reject(error);}
);
  1. 移除攔截器
const myInterceptor = axios.interceptors.request.use(...);
axios.interceptors.request.eject(myInterceptor); // 移除請求攔截器

六、錯誤處理

Axios 的錯誤處理通過 catch 或 try/catch 實現，常見錯誤類型：

axios.get('/api/data').then(response => {// 處理成功響應}).catch(error => {if (axios.isAxiosError(error)) {// 處理 Axios 錯誤（如請求錯誤、響應錯誤）console.log('Axios 錯誤:', error.message);console.log('錯誤狀態碼:', error.response?.status);console.log('錯誤響應數據:', error.response?.data);} else {// 處理其他錯誤（如網絡錯誤）console.log('其他錯誤:', error);}});

七、取消請求

在組件卸載或請求不再需要時，可取消請求以避免資源浪費。

  1. 使用 CancelToken（舊方式）
import axios from 'axios';const source = axios.CancelToken.source();axios.get('/api/data', {cancelToken: source.token
}).then(response => {// 處理響應
}).catch(error => {if (axios.isCancel(error)) {console.log('請求已取消:', error.message);}
});// 取消請求
source.cancel('用戶取消了請求');
  1. 使用 AbortController（推薦，瀏覽器原生支持）
const controller = new AbortController();
const signal = controller.signal;axios.get('/api/data', { signal }).then(response => {// 處理響應}).catch(error => {if (error.name === 'AbortError') {console.log('請求已取消');}});// 取消請求
controller.abort();

八、并發請求

Axios 提供 axios.all 方法處理多個并發請求，并通過 axios.spread 分配結果。

const request1 = axios.get('/api/data1');
const request2 = axios.get('/api/data2');axios.all([request1, request2]).then(axios.spread((response1, response2) => {// 兩個請求都成功時執行console.log('數據1:', response1.data);console.log('數據2:', response2.data);})).catch(errors => {// 任一請求失敗時執行console.log('并發請求錯誤:', errors);});

九、創建實例（Instance）

當需要不同配置的請求時，可創建多個 Axios 實例。

// 創建自定義實例
const instance = axios.create({baseURL: 'https://api.example.com',timeout: 10000,headers: {'Content-Type': 'application/json'}
});// 使用實例發送請求
instance.get('/users').then(response => {console.log(response.data);});// 為實例添加攔截器
instance.interceptors.request.use(...);

十、與框架集成

  1. 在 Vue 中使用
// main.js 中配置
import axios from 'axios';
Vue.prototype.$axios = axios; // 將 axios 掛載到 Vue 實例上// 組件中使用
this.$axios.get('/api/data').then(response => {this.data = response.data;});
  1. 在 React 中使用
import axios from 'axios';function fetchData() {return axios.get('/api/data').then(response => response.data);
}function MyComponent() {const [data, setData] = useState(null);useEffect(() => {fetchData().then(setData);// 組件卸載時取消請求（使用 AbortController）const controller = new AbortController();return () => controller.abort();}, []);// ...
}

十一、最佳實踐與常見問題

  1. 設置默認配置
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

  1. 處理跨域請求
    前端設置 withCredentials: true
    后端配置 CORS 響應頭（如 Access-Control-Allow-Origin）

  2. 請求超時重試

// 封裝超時重試函數
function retryRequest(config, retries = 3) {return new Promise((resolve, reject) => {const attempt = () => {axios(config).then(resolve).catch(error => {if (error.code === 'ECONNABORTED' && retries > 0) {// 超時錯誤且還有重試次數setTimeout(() => {retryRequest(config, retries - 1).then(resolve, reject);}, 1000);} else {reject(error);}});};attempt();});
}
  1. 與 Fetch API 對比
    Axios 優勢：瀏覽器 / Node 通用、攔截器、自動轉換 JSON、錯誤處理更友好
    Fetch 優勢：瀏覽器原生支持、更簡潔的 API、支持 AbortController（需 polyfill 兼容舊瀏覽器）

十二、TypeScript 支持

Axios 原生支持 TypeScript，可通過泛型指定響應數據類型：

interface User {id: number;name: string;
}// 指定響應數據類型為 User 數組
axios.get<User[]>('/api/users').then(response => {// response.data 會被推斷為 User[] 類型const firstUser = response.data[0].name;});

十三、Axios 調用后端全局 API

1、全局方法 httpClient.js

import axios from 'axios';// 創建 axios 實例
const service = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API, // 從環境變量獲取API基礎URLtimeout: 5000, // 請求超時時間headers: {'Content-Type': 'application/json;charset=utf-8'}
});// 請求攔截器
service.interceptors.request.use(config => {// 在發送請求之前做些什么// 例如添加 tokenconst token = localStorage.getItem('token');if (token) {config.headers['Authorization'] = `Bearer ${token}`;}return config;},error => {// 對請求錯誤做些什么console.log(error); // for debugreturn Promise.reject(error);}
);// 響應攔截器
service.interceptors.response.use(response => {// 對響應數據做點什么const res = response.data;// 假設業務狀態碼 200 表示成功if (res.code !== 200) {console.log(res.message || 'Error');return Promise.reject(new Error(res.message || 'Error'));} else {return res;}},error => {// 對響應錯誤做點什么console.log('err' + error); // for debugreturn Promise.reject(error);}
);export default service;

2、四種 HTTP 方法 封裝 api.js

import service from './httpClient';/*** get 請求* @param {string} url 請求路徑* @param {object} params 請求參數* @returns {Promise}*/
export function get(url, params) {return service({url,method: 'get',params});
}/*** post 請求* @param {string} url 請求路徑* @param {object} data 請求數據* @returns {Promise}*/
export function post(url, data) {return service({url,method: 'post',data});
}/*** put 請求* @param {string} url 請求路徑* @param {object} data 請求數據* @returns {Promise}*/
export function put(url, data) {return service({url,method: 'put',data});
}/*** delete 請求* @param {string} url 請求路徑* @param {object} params 請求參數* @returns {Promise}*/
export function del(url, params) {return service({url,method: 'delete',params});
}

3、使用封裝方法 userService.js

import { get, post, put, del } from './api';// 獲取用戶列表
export function getUserList(params) {return get('/api/users', params);
}// 創建用戶
export function createUser(data) {return post('/api/users', data);
}// 更新用戶信息
export function updateUser(id, data) {return put(`/api/users/${id}`, data);
}// 刪除用戶
export function deleteUser(id) {return del(`/api/users/${id}`);
}

這個封裝包含三個主要部分：

  1. 基礎配置和攔截器設置（httpClient.js）
  2. 四種 HTTP 方法的封裝（api.js）
  3. 示例服務模塊（userService.js）展示如何使用封裝的方法

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

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

相關文章

【軟考高級系統架構論文】論 SOA 在企業集成架構設計中的應用

【軟考高級系統架構論文】論 SOA 在企業集成架構設計中的應用

論文真題 企業應用集成(Enterprise Application Integration, EAI)是每個企業都必須要面對的實際問題。面向服務的企業應用集成是一種基于面向服務體系結構(Service - Oriented Architecture, SOA)的新型企業應用集成技術，強調將企業和組織內部的資源和業務功能暴露為服務，實…
閱讀更多...
springboot 提供的可擴展接口

springboot 提供的可擴展接口

一、spring 和 springboot Spring框架提供了全面的基礎架構支持。包含依賴注入和開箱即用等模塊&#xff0c;如&#xff1a;Spring JDBC 、Spring MVC 、Spring Security、 Spring AOP 、Spring ORM 、Spring Test Spring Boot 約定大于配置-----消除了設置Spring應用程序所需…
閱讀更多...
python學習打卡day55

python學習打卡day55

DAY 55 序列預測任務介紹 知識點回顧 序列預測介紹 單步預測多步預測的2種方式 序列數據的處理&#xff1a;滑動窗口多輸入多輸出任務的思路經典機器學習在序列任務上的劣勢&#xff1b;以隨機森林為例 作業&#xff1a;手動構造類似的數據集&#xff08;如cosx數據&#xff09…
閱讀更多...
Leetcode hot100 Java刷題

Leetcode hot100 Java刷題

文章目錄 快排146. LRU 緩存acm模式樹的前中后序遍歷acm模式鏈表的基本操作1. 兩數之和49. 字母異位詞分組128. 最長連續序列283. 移動零11. 盛最多水的容器15. 三數之和42. 接雨水53. 最大子數組和56. 合并區間73. 矩陣置零48. 旋轉圖像141. 環形鏈表142. 環形鏈表 II24. 兩兩…
閱讀更多...
Linux 命令詳解 —— 進程管理

Linux 命令詳解 —— 進程管理

文章目錄 精通Linux操作系統(以Centos7為例)進程管理ps常用組合進程狀態 STAT 詳解高級篩選與格式化輸出按條件過濾進程自定義輸出字段顯示進程樹關系排障場景定位高 CPU檢查僵尸進程查看進程的線程查看進程打開的文件/網絡連接常用組合速查top前5摘要區進程列表信息交互式命令…
閱讀更多...
【軟考高級系統架構論文】論湖倉一體架構及其應用

【軟考高級系統架構論文】論湖倉一體架構及其應用

論文真題&#xff1a; 隨著5G、大數據、人工智能、物聯網等技術的不斷成熟&#xff0c;各行各業的業務場景日益復雜&#xff0c;企業數據呈現出大規模、多樣性的特點&#xff0c;特別是非結構化數據呈現出爆發式增長趨勢。在這一背景下&#xff0c;企業數據管理不再局限于傳統…
閱讀更多...
Docker 高級管理筆記

Docker 高級管理筆記

前言&#xff1a;Docker 高級管理概述 隨著 Docker 技術的廣泛應用&#xff0c;容器化已成為現代軟件開發與部署的核心方式。本筆記聚焦 Docker 高級管理中的兩大關鍵技術 —— 容器通信與數據持久化&#xff0c;深入解析 Docker 網絡模式、端口映射、容器互聯機制及數據卷管理…
閱讀更多...
Spring Boot 項目初始化

Spring Boot 項目初始化

一、什么是 CommandLineRunner CommandLineRunner 是 Spring Boot 提供的一個 函數式接口&#xff0c;聲明如下&#xff1a; 該接口只有一個 run(String... args) 方法&#xff0c;會在 Spring Boot 容器啟動完成后被自動調用。 你可以將它理解為一種“鉤子函數”&#xff0c;…
閱讀更多...
C# winform教程(二)----ComboBox

C# winform教程(二)----ComboBox

一、作用 一個可以輸入也可以下拉的列表框。 二、屬性 一般我們都是使用下拉列表&#xff0c;不使用在線編輯&#xff08;本人沒用過&#xff09; 屬性 名稱內容含義items組合框中項可以定義下拉列表的值DropDownStyle外觀和功能是否可以填寫&#xff0c;一般選擇dropdownli…
閱讀更多...
FFmpeg裁剪視頻在Android上的實現

FFmpeg裁剪視頻在Android上的實現

添加依賴&#xff1a; implementation com.arthenica:mobile-ffmpeg-full:4.4.LTS 代碼實現&#xff1a; fun cropMiddleThird(inputPath: String, outputPath: String) {val cmd arrayOf("-y", // 覆蓋輸出文件"-i", inputPath,"-filter:v&quo…
閱讀更多...
openEuler 22.03 sp1 更新openssh 10.0p2 —— 筑夢之路

openEuler 22.03 sp1 更新openssh 10.0p2 —— 筑夢之路

華為歐拉openEuler制作openssh 9.1/9.2/9.3 p1 rpm——筑夢之路_歐拉構建openssh-CSDN博客 上面是需要修改的sshd_config配置&#xff0c;將這3行注釋掉。 附上22.03 sp1的yum源文件 # cat openEuler.repo #generic-repos is licensed under the Mulan PSL v2. #You can use t…
閱讀更多...
AGI（4）大模型的推理綜述

AGI（4）大模型的推理綜述

本文源自基于基礎模型的推理綜述《A Survey of Reasoning with Foundation Models》&#xff0c;因為原文有點難于理解&#xff0c;在這個論文的基礎上增加了自己的解釋和理解&#xff0c;重新整理成此文。大家可以通過查看原文閱讀原始論文。 1、推理的概念 推理是解決復雜問題…
閱讀更多...
Rust 中的宏與函數

Rust 中的宏與函數

在 Rust 編程中&#xff0c;宏&#xff08;Macro&#xff09;和函數&#xff08;Function&#xff09;是兩種非常重要的編程工具。雖然它們都可以用來組織代碼和實現復用&#xff0c;但它們在定義方式、作用原理、性能、靈活性以及適用場景等方面存在諸多不同。本文將詳細介紹 …
閱讀更多...
c++中左值與右值

c++中左值與右值

在 C++ 中，左值（lvalue） 和 右值（rvalue） 是表達式的基本屬性，它們決定了表達式能否被賦值、取地址等操作。 1. 核心定義 左值（lvalue） 特點：表示一個具名的、持久的對象，可位于賦值語句左側。示例： int x = 42; // x是左值 x = 100; // 合法：左值可…
閱讀更多...
DeepSeek14-open-webui 常用概念區分

DeepSeek14-open-webui 常用概念區分

I、“Tools & Functions” 與 Pipelines&#xff08;工作流系統&#xff09;區別 以下是“Tool & Functions”與“Pipelines”的區別、適用場景及作用的詳細分析&#xff0c;內容基于參考文檔提取與總結&#xff1a; 一、本質區別 維度Tool & FunctionsPipeline…
閱讀更多...
PaddleOCR + Flask 構建 Web OCR 服務實戰

PaddleOCR + Flask 構建 Web OCR 服務實戰

1、前言 隨著圖像識別技術的發展，OCR（光學字符識別）已經成為很多應用場景中的基礎能力。PaddleOCR 是百度開源的一個高性能 OCR 工具庫，支持中英文、多語言、輕量級部署等特性。 而 Flask 是一個輕量級的 Python Web 框架，非常適合快速構建 RESTful API 或小型 Web 應用…
閱讀更多...
C++結構體初始化與成員函數實現語法詳解

C++結構體初始化與成員函數實現語法詳解

C結構體初始化與成員函數實現語法詳解 一、結構體靜態成員初始化語法 在C中&#xff0c;靜態成員變量需要在類外部進行定義和初始化。提供的代碼展示了如何為MAIN_PROPULSION_CAN類的靜態成員變量進行初始化&#xff1a; MAIN_PROPULSION_CAN::VoltageThresholds MAIN_PROPU…
閱讀更多...
買了新內存條插上bios識別，進入系統不可用，b450主板，內存插槽A1A2 可以點亮，B1B2不可以，A2B2不可以，B1B2還是不可以

買了新內存條插上bios識別，進入系統不可用，b450主板，內存插槽A1A2 可以點亮，B1B2不可以，A2B2不可以，B1B2還是不可以

提示&#xff1a;買了新內存條插上bios識別&#xff0c;進入系統不可用&#xff0c;b450主板&#xff0c;內存插槽A1A2 可以點亮&#xff0c;B1B2不可以&#xff0c;A2B2不可以 文章目錄 前言——環境一、第一種情況&#xff0c;開機不能點亮二、第二種情況, 總內存&#xff0c…
閱讀更多...
7.4.1_2B樹的插入刪除

7.4.1_2B樹的插入刪除

B樹插入&#xff1a; 假如是m階B樹&#xff0c;插入關鍵字時都要滿足每個節點上的關鍵字個數最少為m/2向上取整-1關鍵字&#xff0c;最多有m-1個關鍵字&#xff0c;且每次插入的新元素一定是放在最底層的終端節點(因為如果不是放在終端節點&#xff0c;會導致該節點上可能有葉子…
閱讀更多...
Linux系統基本操作指令

Linux系統基本操作指令

Linux系統基本操作指令 文章目錄 Linux系統基本操作指令一、介紹二、基礎設置2.1 設置ubuntu與window的共享目錄2.2 ubuntu系統簡單介紹 三、Linux命令及工具介紹3.1 目錄管理命令(功能&#xff0c;格式&#xff0c;參數&#xff0c;系統參數)3.2 文件操作命令 四、網絡命令4.1…
閱讀更多...
最新文章

Copyright @ 2022~2023