9.axios底層原理,和promise的對比(2)

😺😺😺 和promise的對比
完全可以直接使用 Promise 來發 HTTP 請求,比如用原生 fetch + Promise 就可以實現網絡請求功能👇

? 用 Promise + fetch 的寫法(原生)

fetch(‘https://api.example.com/data’)
.then(response => {
if (!response.ok) {
throw new Error(‘網絡請求失敗’);
}
return response.json();
})
.then(data => {
console.log(‘獲取到的數據:’, data);
})
.catch(error => {
console.error(‘出錯了:’, error);
});

或者配合 async/await:

async function getData() {
try {
const res = await fetch(‘https://api.example.com/data’);
const data = await res.json();
console.log(data);
} catch (err) {
console.error(‘請求失敗:’, err);
}
}

?那為什么還要用 Axios?

你可以把 Axios 理解為在 Promise 的基礎上,做了很多貼心的“增強封裝”,避免你自己重復造輪子,比如

? 小結一句話
完全可以用Promise 來發 HTTP 請求,比如用原生 fetch + Promise 就可以實現網絡請求功能👇

? 用 Promise + fetch 的寫法(原生)

fetch(‘https://api.example.com/data’)
.then(response => {
if (!response.ok) {
throw new Error(‘網絡請求失敗’);
}
return response.json();
})
.then(data => {
console.log(‘獲取到的數據:’, data);
})
.catch(error => {
console.error(‘出錯了:’, error);
});

或者配合 async/await:

async function getData() {
try {
const res = await fetch(‘https://api.example.com/data’);
const data = await res.json();
console.log(data);
} catch (err) {
console.error(‘請求失敗:’, err);
}
}

?那為什么還要用 Axios?

你可以把 Axios 理解為在 Promise 的基礎上,做了很多貼心的“增強封裝”,避免你自己重復造輪子,比如

在這里插入圖片描述

? 小結一句話

Promise 是底層機制;fetch 是瀏覽器原生 API;Axios 是基于 Promise 的高級封裝,幫你做了更多重復性的工作。

所以結論是:
? ? 想極簡 + 自己控制邏輯:可以直接用 fetch + Promise
? 🚀 想方便 + 攔截器 + 項目統一封裝:推薦用 Axios

😺😺😺 aixos的底層原理
lAxios 的底層原理,可以把它理解為一層「統一的網絡請求封裝」,根據運行環境自動調用不同的底層實現。

? 一句話概括:

Axios 是一個對瀏覽器的 XMLHttpRequest 和 Node.js 的 http 模塊的封裝,并結合了 Promise、攔截器、中間件機制等高級功能的請求庫。

🧩 Axios 底層原理詳解(按執行流程講)

  1. 運行環境判斷

Axios 的代碼是通用的,在構建時自動根據環境(瀏覽器 vs Node)使用不同適配器:

// 源碼片段
var getDefaultAdapter = function getDefaultAdapter() {
if (typeof XMLHttpRequest !== ‘undefined’) {
return require(’./adapters/xhr’); // 瀏覽器環境
} else if (typeof process !== ‘undefined’) {
return require(’./adapters/http’); // Node.js 環境
}
};

  1. 核心結構:axios 實例本質是一個函數 + 配置鏈式調用系統

Axios 是通過 axios.create() 創建一個帶默認配置的實例,其實本質是一個函數對象,并帶有攔截器、請求方法(get/post/put…)等屬性。

const axios = Axios.create();
axios.get(’/url’) // 就是在調用實例對象的方法

  1. 請求發送:根據環境走不同適配器

👉 瀏覽器中

使用的是 XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.send(data);

👉 Node.js 中

使用的是 http 或 https 模塊

const http = require(‘http’);
const req = http.request(options, res => {
// 處理響應
});
req.write(data);
req.end();

  1. 請求流程組成(重點)

用戶調用 axios(config)

合并默認配置 + 用戶配置

執行請求攔截器鏈(request interceptors)

調用適配器(xhr / http)發出請求

獲取響應后執行響應攔截器鏈(response interceptors)

返回 Promise 給調用者

  1. 攔截器機制(interceptors)

Axios 內部實現了一個 鏈式中間件系統,用來處理攔截器。

你添加的攔截器會被加入到一條“任務鏈”中執行,先執行 request 攔截器,再發請求,之后執行 response 攔截器:

interceptors.request.use(fn1);
interceptors.request.use(fn2); // 執行順序:fn1 → fn2

  1. Promise 化封裝

Axios 所有操作都是 Promise 化的,便于使用 async/await,也方便鏈式 .then() 調用。

return new Promise((resolve, reject) => {
xhr.onload = () => resolve(response);
xhr.onerror = () => reject(error);
});

🧠 總結一句話:

Axios 底層是通過環境適配調用 XHR 或 Node 的 HTTP 模塊,外部暴露統一的 Promise 風格 API,并通過“攔截器鏈”實現請求和響應邏輯的可擴展性。

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

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

相關文章

什么是數據孤島?如何實現從數據孤島到數據共享?

目錄 一、數據孤島是什么? (一)數據孤島的定義 (二)數據孤島怎么形成的 二、數據孤島帶來的問題 (一)數據冗余和不一致 (二)決策效率低下 (三&#xf…

MQTT入門實戰寶典:從零起步掌握物聯網核心通信協議

MQTT入門實戰寶典:從零起步掌握物聯網核心通信協議 前言 物聯網時代,萬物互聯已成為現實,而MQTT協議作為這個時代的"數據總線",正默默支撐著從智能家居到工業物聯的各類應用場景。本文將帶你揭開MQTT的神秘面紗&#…

I2C通信講解

I2C總線發展史 怎么在一條串口線上連接多個設備呢? 由于速度同步線是由主機實時發出的,所以主機可以按需求修改通信速度,這樣在一條線上可以掛接不同速度的器件,單片機和性能差的器件通信,就輸出較慢的脈沖信號&#x…

Windows 10 IoT 系統深度定制指南:從環境搭建到工業部署

目錄 一、Windows 10 IoT 架構特性與版本選型 1.1 核心架構設計 1.2 版本對比與選型建議 二、開發環境搭建與硬件適配 2.1 工具鏈配置 2.2 硬件適配關鍵步驟 三、系統定制流程詳解 3.1 鏡像定制(IoT Core Dashboard) 3.2 使用ICD(Im…

k8s開發webhook使用certmanager生成證書

1.創建 Issuer apiVersion: cert-manager.io/v1 kind: Issuer metadata:name: selfsigned-issuernamespace: default spec:selfSigned: {}2.Certificate(自動生成 TLS 證書) apiVersion: cert-manager.io/v1 kind: Certificate metadata:name: webhook…

MyBatis-Plus深度全解:從入門到企業級實戰

MyBatis-Plus深度全解:從入門到企業級實戰 一、為什么選擇MyBatis-Plus? 1.1 MyBatis的痛點 - 重復CRUD代碼編寫 - 分頁功能實現復雜 - 缺少通用Service層封裝 - 動態表名支持困難 - 多租戶方案需自行實現1.2 MyBatis-Plus核心優勢 無侵入&#xff1a…

【無標題】路徑著色問題的革命性重構:拓撲色動力學模型下的超越與升華

路徑著色問題的革命性重構:拓撲色動力學模型下的超越與升華 一、以色列路徑著色模型的根本局限 mermaid graph TB A[以色列路徑著色模型] --> B[強連通約束] A --> C[僅實邊三角剖分] A --> D[靜態色彩分配] B --> E[無法描述非相鄰關系] C --> F[忽…

01 Deep learning神經網絡的編程基礎 二分類--吳恩達

二分類 1. 核心定義 二分類任務是監督學習中最基礎的問題類型,其目標是將樣本劃分為兩個互斥類別。設樣本特征空間為 X ? R n \mathcal{X} \subseteq \mathbb{R}^n X?Rn,輸出空間為 Y { 0 , 1 } \mathcal{Y} \{0,1\} Y{0,1},學習目標為…

數據結構:遞歸:泰勒展開式(Taylor Series Expansion)

目錄 第一步:?我們要解決什么? 第二步:將其類比為求自然數和 第三步:什么是每一項? 第四步:定義要計算的每一項(term) 第五步:定義遞歸函數結構 🌳 調用…

Hadolint:Dockerfile 語法檢查與最佳實踐驗證的終極工具

在容器化應用開發的浪潮中,Dockerfile 作為構建 Docker 鏡像的核心配置文件,其質量直接影響著應用的安全性、穩定性和可維護性。然而,隨著項目復雜度的增加,手動檢查 Dockerfile 不僅耗時,還容易遺漏潛在問題。今天,我要向大家介紹一款強大的工具——Hadolint,它將徹底改…

redis數據過期策略、淘汰策略

過期鍵的刪除策略? ??1. 被動刪除(惰性刪除)?? ??觸發時機??:當客戶端嘗試訪問某個鍵時,Redis會先檢查該鍵是否過期。就是說,我們不時時檢查每個鍵是否過期,而是在使用到這個鍵時檢查是否過期&a…

ES 學習總結一 基礎內容

ElasticSearch學習 一、 初識ES1、 認識與安裝2、 倒排索引2.1 正向索引2.2 倒排索引 3、 基本概念3.1 文檔和字段3.2 索引和倒排 4 、 IK分詞器 二、 操作1、 mapping 映射屬性2、 索引庫增刪改查3、 文檔的增刪改查3.1 新增文檔3.2 查詢文檔3.3 刪除文檔3.4 修改文檔3.5 批處…

鴻蒙任務項設置案例實戰

目錄 案例效果 資源文件與初始化 string.json color.json CommonConstant 添加任務 首頁組件 任務列表初始化 任務列表視圖 任務編輯頁 添加跳轉 任務目標設置模型(formatParams) 編輯頁面 詳情頁 任務編輯列表項 目標設置展示 引入目標…

DeepSeek-R1-0528重磅升級:三大突破重新定義AI生產力

2025年5月28日,中國AI領軍企業深度求索(DeepSeek)正式發布DeepSeek-R1-0528版本,這是繼2025年1月R1模型登頂中美App Store后,DeepSeek在通用大模型領域的又一次戰略級突破。此次升級雖為小版本迭代,卻在推理…

【算法訓練營Day07】字符串part1

文章目錄 反轉字符串反轉字符串II替換數字 反轉字符串 題目鏈接&#xff1a;344. 反轉字符串 雙指針法&#xff0c;兩個指針的元素直接調轉即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …

中國西部逐日1 km全天候地表溫度數據集(TRIMS LST-TP;2000-2024)

時間分辨率&#xff1a;日空間分辨率&#xff1a;100m - 1km共享方式&#xff1a;開放獲取數據大小&#xff1a;474.31 GB數據時間范圍&#xff1a;2000-01-01 — 2024-12-31元數據更新時間&#xff1a;2025-05-31 數據集摘要 青藏高原是全球氣候變化的敏感區域。地表溫度&…

PPT轉圖片拼貼工具 v1.0

軟件介紹 這個軟件的作用就是將單個PPT的每一頁轉換為單獨的圖片&#xff0c;然后將圖片進行拼接起來。 但是我沒有還沒有解決一次性處理多個文件。 效果展示如下&#xff1a; 軟件安裝 軟件源碼 import os import re import win32com.client from PIL import Imagedef con…

嵌入式學習筆記DAY33(網絡編程——TCP)

一、網絡架構 C/S &#xff08;client/server 客戶端/服務器&#xff09;&#xff1a;由客戶端和服務器端兩個部分組成。客戶端通常是用戶使用的應用程序&#xff0c;負責提供用戶界面和交互邏輯 &#xff0c;接收用戶輸入&#xff0c;向服務器發送請求&#xff0c;并展示服務…

拋磚引玉:RadarDet4D,NuScenes數據集Radar模態目標檢測第二名(即將開源)

這幾年一直在關注自動駕駛3D目標檢測相關的研究。在NuScenes數據集上有很多經典的模型被提出并得到了驗證&#xff0c;純視覺3D目標檢測經典的方法有BEVFormer、BEVDet系列、DETR3D、Sparse4D等工作&#xff0c;基于LiDAR的有CenterPoint、多模態有BEVFusion、DAL、UniTR等。 …

更新Java的環境變量后VScode/cursor里面還是之前的環境變量

最近我就遇到這個問題&#xff0c;這個一般是安裝了多個版本的Java&#xff0c;并設置好環境變量&#xff0c;但VScode/cursor內部環境變量卻沒有改變 解決辦法 打開設置&#xff0c;或者直接快捷鍵CTRL&#xff0c;搜索Java:Home編輯settings.json文件 把以下部分改為正確的…