深入淺出掌握 Axios(持續更新)

在了解ajax和axios之前，我們先觀察一下他們是什么英文的縮寫

ajax 的名字為 asynchroanous JavaScript and XML

而axios的名稱來源于英文單詞“axis”與“I/O”的結合，并非直接縮寫自某個特定短語。

先導知識

在本文我們簡單的介紹一下ajax后著重講解axios，在平時工作中因為ajax配置較為底層，代碼相對冗長，所以我們使用更為現代化的axios

Axios是一個基于Promise的HTTP客戶端庫，專為瀏覽器和Node.js設計。其優勢包括：

  • 簡潔的API設計，支持Promise鏈式調用。
  • 自動轉換JSON數據，攔截請求和響應。
  • 提供取消請求、超時控制等高級功能。

到底什么是基于promise？請看一下博主的上一篇文章Javascript異步代碼處理-CSDN博客

我們在這里簡單的介紹一下：Promise是JavaScript中用于處理異步操作的編程構造。它表示一個異步操作的最終完成（成功或失敗）及其結果值。最重要的是理解異步操作。

還有一個重點需要了解的是HTTP請求，此知識在各大網站均可搜到淺談HTTP中Get、Post、Put與Delete的區別_聯想如何跳過聯網-CSDN博客，先確保自己了解清楚后再開始axios的學習。

在傳統的網頁開發中，每次我們點擊一個鏈接或按鈕跳轉到另一個頁面時，瀏覽器會重新加載整個頁面。這個過程會出現短暫的白屏現象（頁面內容完全空白），這是因為瀏覽器正在等待從服務器加載新的頁面內容。

為了改善這種用戶體驗，開發者通常會嘗試優化網絡傳輸速度，比如壓縮資源文件、使用緩存、開啟CDN等方式來減少白屏時間。但無論我們怎么優化網絡傳輸，總還會有一個過程是“清空頁面 → 加載新頁面”，這就不可避免地會出現白屏。

另外，傳統的網頁更新方式也存在一個效率問題：哪怕只需要更改頁面上的一小部分內容，也必須整個頁面重新加載。這不僅浪費資源，也讓用戶等待的時間變長。

在構建現代web項目的時候，前端與后端之間親密的數據交互是重要的核心環節。而我們就是采用AJAX技術來實現這種數據交互的過程的。雖然瀏覽器本身已經提供了XMLHttpRequest和fetch()等等方式，但是他們或多或少存在復雜，兼容性不一等等的問題。

于是我們采用一個更強大，更友好，更靈活的AJAX封裝庫--Axios

在開始之前我們先了解如何引入axios在我們的項目中

如果你用的是前端構建工具（如 Vite、Webpack、Vue CLI）：

npm install axios? 或者 yarn add axios

CDN 引入（適合純 HTML 頁面）：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

引入后，請你記住，我們引入axios的目的就是來實現異步請求的，異步就是異步，請求有很多種。

同步

在了解異步之前我們先學習一下什么是同步，我們并不舉一些生活的例子，直接使用代碼方面的解釋什么是同步：代碼按順序一行一行執行，每一行都必須等上一行執行完成后才能繼續執行下一行。

console.log('1');
console.log('2');
console.log('3');
代碼輸出結果只能是123，而不會是其他情況

異步

現在我們考慮一下異步，在異步模式中，某些操作不會立即完成（比如網絡請求、定時器等），它們會先掛起或排隊等待執行，程序會繼續執行后面的代碼，而不是等待異步操作完成。

console.log('開始模擬請求');

? ? setTimeout(()=>{

? ? ? ? console.log('請求中')

? ? },2000)

? ? console.log('請求已經發送');

考慮這段代碼，按照我們初學者所想，輸出結果就應該是 開始模擬請求->請求中->請求已經發送

但下面控制臺輸出結果并非如此。

關鍵就在于：setTimeout 是異步的。

  • 當 JavaScript 執行到 setTimeout 時，它不會等里面的代碼執行完再往下走。

  • 它會將回調函數（console.log('請求中')）注冊到“任務隊列”中，然后繼續執行后面的代碼。

  • 等到 定時器時間到了（這里是2秒），并且主線程空閑時，那個回調才會執行。

到這里我們已經理解了異步的核心思想

異步就是：你啟動了一件任務，但不會等它完成才做下一件事。它不會“阻塞”后續代碼的執行，而是“等你有空再處理這件事”。

Axios

上文講到引入axios是完成異步請求的，我們異步已經搞明白了，現在我們來仔細分析一下請求

我們使用axios請求，其實是瀏覽器在背后通過HTTP協議向服務器發送請求并等待響應

包括以下兩個核心部分：

請求(Request): 你告訴服務器我要什么

響應(Response)：服務器告訴你這是你要的內容

常見的請求類型（也叫“方法”）有這些：

方法用途示例
GET獲取數據獲取文章、用戶信息等
POST發送數據（新增）提交表單、注冊用戶等
PUT更新數據修改用戶資料等
PATCH部分更新數據修改一個字段
DELETE刪除數據刪除評論、記錄等

我們現在用一個簡單的文章小系統來了解Axios的基礎用法(請注意我們不會把代碼一股腦全考上來，也不會實打實就寫代碼，而是通過這個項目的流程來熟悉一下axios而已)

我們要構建一個簡單的“文章管理系統”，包含以下功能：

  • ?獲取文章列表

  • ?發布新文章

  • ?修改已有文章

  • ?刪除文章

這些功能剛好對應 Axios 中最常用的四種請求方法：GET、POST、PUT、DELETE。

先說白了，get從哪里get，又post到哪里

  • get 是從 服務器的某個接口（URL） 請求數據

  • post 是把數據 發送到服務器的某個接口（URL）

而這個時候API接口文檔就顯得十分重要了

Restful API 接口規范詳解-騰訊云開發者社區-騰訊云

我們可以使用 json-server 快速搭建本地 REST API

1. 安裝 json-server

npm install -g json-server

?2. 創建模擬數據 db.json

在你的項目根目錄創建一個文件：db.json

?3. 啟動服務

json-server --watch db.json --port 3000

它會自動創建出一組 完整的 RESTful 接口：

功能請求方法地址
獲取所有文章GEThttp://localhost:3000/posts
獲取指定文章GEThttp://localhost:3000/posts/1
添加文章POSThttp://localhost:3000/posts
修改文章PUThttp://localhost:3000/posts/1
刪除文章DELETEhttp://localhost:3000/posts/1

4. 示例代碼：使用 Axios 測試

axios.get('http://localhost:3000/posts') // 獲取文章 axios.post('http://localhost:3000/posts', { title: '測試文章', content: '這是一個模擬添加的文章' });

Axios基本語法學習/復習

了解基本語法之前我們需要學習headers、params，也就是請求頭和請求體的內容

語法形式（通用）

axios(config)
axios({method: 'get', ? ? ? // 請求方法（get/post/put/delete）url: '/api/posts', ? // 請求地址params: { id: 1 }, ? // URL 查詢參數（自動拼接成 ?id=1）data: { title: '標題' }, // 請求體數據（POST/PUT 用）headers: { 'X-Custom': 'value' }, // 自定義請求頭timeout: 5000 ? ? ? ?// 超時設置（單位毫秒）
})

各方法語法和參數

1. axios.get(url, config)

  • url：請求地址

  • config：配置對象（headers、params 等）

axios.get('/api/posts', {params: { id: 1 },headers: { Authorization: 'Bearer token' }
});

2. axios.post(url, data, config)

  • url：請求地址

  • data：請求體（body）內容

  • config：附加配置

axios.post('/api/posts', {title: '新文章',content: '內容'
});

3. axios.put(url, data, config)

axios.put('/api/posts/1', {title: '修改標題'
});

4. axios.delete(url, config)

axios.delete('/api/posts/1');

5. axios.patch(url, data, config)

用于局部更新資源

axios.patch('/api/posts/1', {title: '只修改標題'
});

返回值：Axios 響應結構

Axios 所有請求都會返回一個 Promise，你可以用 .then() 處理返回值：

axios.get('/api/posts/1').then(response => {console.log(response.data); ? ? ? // 服務器返回的數據console.log(response.status); ? ? // 狀態碼，如 200console.log(response.headers); ? ?// 響應頭console.log(response.config); ? ? // 請求配置信息}).catch(error => {console.error(error.response); ? ?// 錯誤響應對象});

Axios 特性匯總

特性說明
基于 Promise支持鏈式調用、async/await 使用
自動 JSON 轉換自動將請求數據轉為 JSON，也自動解析響應 JSON
默認 GET 請求默認 method 是 get，除非你設置為 post 等
跨瀏覽器兼容性強能在所有主流瀏覽器中使用
支持請求/響應攔截器可在請求發出前或收到響應后處理邏輯
取消請求支持 CancelToken 取消請求
防止 XSRF 攻擊自動從 Cookie 獲取 token 設置到請求頭
統一配置可通過 axios.create() 創建實例統一配置

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

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

相關文章

windows10下搭建nfs服務器

windows10下搭建nfs服務器

windows10下搭建nfs服務器 有參考這篇博客 Windows10搭建NFS服務 - fuzidage - 博客園 下載 NFS Server這個app 通過網盤分享的文件&#xff1a;nfs1268 (1).exe 鏈接: https://pan.baidu.com/s/1rE4h710Uh-13kWGXvjkZzw 提取碼: mwa4 --來自百度網盤超級會員v5的分享 下載后…
閱讀更多...
npm符號鏈接

npm符號鏈接

前言 最近在寫一個快應用項目&#xff0c;demo中依賴了本地文件&#xff0c;package.json如下&#xff1a; 此時 node_modules 下出現了 mysdk&#xff0c;復制整個項目&#xff0c;但是copy的項目中的node_modules并未出現該文件&#xff0c;導致報錯。 解決方案 觀察 pa…
閱讀更多...
SQL 中 IDENTITY 列的特殊處理.

SQL 中 IDENTITY 列的特殊處理.

SQL 處理中,遇到提示: "消息 544，級別 16，狀態 1，第 3 行 當 IDENTITY_INSERT 設置為 OFF 時，不能為表 BM 中的標識列插入顯式值。" 即當 SQL Server 表中的 ??標識列（Identity Column）?? 插入顯式值，但未啟用 IDENTITY_INSERT 選項。由此報錯,以下是詳…
閱讀更多...
網絡安全等級保護中關于SSL證書的整改如何處理？

網絡安全等級保護中關于SSL證書的整改如何處理？

SSL證書在網絡安全等級保護&#xff08;等保&#xff09;體系中扮演著至關重要的角色&#xff0c;是實現多個等保核心要求&#xff08;尤其是三級及以上&#xff09;的關鍵技術手段之一。其重要性主要體現在以下幾個方面&#xff1a; 滿足“身份鑒別”要求&#xff08;等保要求…
閱讀更多...
Docker容器化打造elasticsearch8.18.2集群企業實戰（含kibana+證書認證）

Docker容器化打造elasticsearch8.18.2集群企業實戰（含kibana+證書認證）

主機信息 主機配置4Core8GB硬盤大于80GB 主機名IP地址角色10-0-17-12310.0.17.123es-node110-0-17-15810.0.17.158es-node2kibana-15610.0.17.156kibana 一、環境準備 1. 安裝 Docker 這里就不介紹如何安裝docker了&#xff0c;本文docker版本為20 2. 主機名與網絡與內核配置…
閱讀更多...
JAVA語言的學習（Day_1）

JAVA語言的學習（Day_1）

寫一個項目并運行&#xff1a; 第一步&#xff1a;新建一個.txt文本。右擊點開用Notepad打開&#xff0c;并編輯。 編輯并保存后&#xff0c;可以在文件的查看中&#xff0c;顯示出文件的類型&#xff08;eg: .txt / .java)。將txt文本的.txt類型改為.java。 之后在下面的截…
閱讀更多...
JS 原型與原型鏈詳解

JS 原型與原型鏈詳解

JavaScript 原型與原型鏈詳解 文章目錄 JavaScript 原型與原型鏈詳解一、基礎概念類1.1 什么是原型&#xff1f;JavaScript 中如何訪問一個對象的原型&#xff1f;1.2 構造函數、實例對象和原型對象之間的關系是什么&#xff1f;1.3 prototype 和 **proto** 的區別是什么&#…
閱讀更多...
DEVICENET轉MODBUS TCP網關連接DeviceNet數字遠程IO模塊配置案例

DEVICENET轉MODBUS TCP網關連接DeviceNet數字遠程IO模塊配置案例

設備與網絡架構&#xff0c;主控設備&#xff1a;支持Modbus TCP協議的PLC&#xff08;如西門子S7-1200&#xff09;。網關設備&#xff1a;開疆智能Modbus TCP轉DeviceNet網關KJ-DVCZ-MTCPS&#xff08;需支持DeviceNet從站功能&#xff09;。目標設備&#xff1a;DeviceNet數…
閱讀更多...
Ubuntu下使用PyTurboJPEG加速圖像編解碼

Ubuntu下使用PyTurboJPEG加速圖像編解碼

目錄 一、概述 二、安裝PyTurboJPEG 三、測試 一、概述 在計算機視覺領域&#xff0c;圖像編解碼是繞不開的基礎環節。雖然 OpenCV 能解決大部分圖像處理問題&#xff0c;但在性能要求嚴苛的場景下存在短板。本文將介紹基于 libjpeg-turbo 的高效 JPEG 編解碼庫 PyTurboJPE…
閱讀更多...
MCU、MPU、GPU、Soc、DSP、FPGA、CPLD……它們到底是什么？

MCU、MPU、GPU、Soc、DSP、FPGA、CPLD……它們到底是什么？

MCU、MPU、GPU、Soc、DSP、FPGA、CPLD…… 這些簡稱在各大論壇、會議、發布會中屢見不鮮&#xff0c;看到簡稱&#xff0c;雖然也能說出大概&#xff1b; 但要問具體是什么&#xff1f;用在什么場景&#xff1f;又有什么區別……好像還是差點意思&#xff1b;本篇文章就記錄一…
閱讀更多...
Django RBAC項目后端實戰 - 03 DRF權限控制實現

Django RBAC項目后端實戰 - 03 DRF權限控制實現

項目背景 在上一篇文章中&#xff0c;我們完成了JWT認證系統的集成。本篇文章將實現基于Redis的RBAC權限控制系統&#xff0c;為系統提供細粒度的權限控制。 開發目標 實現基于Redis的權限緩存機制開發DRF權限控制類實現權限管理API配置權限白名單 前置配置 在開始開發權限…
閱讀更多...
[網頁五子棋][用戶模塊]數據庫設計和配置(MyBatis)、約定前后端交互接口、服務器開發

[網頁五子棋][用戶模塊]數據庫設計和配置(MyBatis)、約定前后端交互接口、服務器開發

文章目錄 數據庫數據庫設計配置 MyBatis1. Spring 配置2. 創建實體類3. 創建 Mapper 接口4. 使用 MyBatis 約定前后端交互接口登錄接口注冊接口獲取用戶信息 服務器開發loginregistergetUserInfo完整代碼 數據庫 數據庫設計 完成注冊登錄以及用戶分數管理 使用數據庫來保存上…
閱讀更多...
Qt/C++學習系列之列表使用記錄

Qt/C++學習系列之列表使用記錄

Qt/C學習系列之列表使用記錄 前言列表的初始化界面初始化設置名稱獲取簡單設置 單元格存儲總結 前言 列表的使用主要基于QTableWidget控件&#xff0c;同步使用QTableWidgetItem進行單元格的設置&#xff0c;最后可以使用QAxObject進行單元格的數據讀出將數據進行存儲。接下來…
閱讀更多...
防火墻通常可以分為哪些類型？

防火墻通常可以分為哪些類型？

防火墻是目前保護網絡安全的重要設備&#xff0c;能夠通過監控、過濾和控制進出網絡的數據流量&#xff0c;來保護內部網絡不會受到未經授權的IP地址進行訪問和惡意的網絡威脅&#xff0c;設置防火墻能夠幫助企業確保網絡的安全性&#xff0c;同時防火墻也會根據不同的功能來劃…
閱讀更多...
基于GeoTools的道路相交多個點容差冗余計算實戰

基于GeoTools的道路相交多個點容差冗余計算實戰

目錄 前言 一、關于道路相交 1、相交四個點 2、點更多的情況 二、基于距離的相交點去重 1、冗余距離計算 2、調用過程 3、去重后的結果 三、總結 前言 在地理信息系統&#xff08;GIS&#xff09;領域&#xff0c;道路網絡數據的處理與分析一直是關鍵課題。隨著城市化進…
閱讀更多...
android:foregroundServiceType詳解

android:foregroundServiceType詳解

在 Android 中&#xff0c;foregroundServiceType 是用于聲明前臺服務類型的屬性&#xff0c;主要從 Android 10&#xff08;API 29&#xff09;開始引入&#xff0c;并在 Android 11&#xff08;API 30&#xff09;及更高版本 中進一步細化。以下是所有可用的 foregroundServi…
閱讀更多...
React+Taro 微信小程序做一個頁面，背景圖需貼手機屏幕最上邊覆蓋展示

React+Taro 微信小程序做一個頁面，背景圖需貼手機屏幕最上邊覆蓋展示

話不多說 直接上圖 第一步 import { getSystemInfoSync } from tarojs/taro;第二步 render() {const cardBanner getImageUrlByGlobal(member-merge-bg.png);const { safeArea, statusBarHeight } getSystemInfoSync();const NAV_BAR_HEIGHT 44;const navBarHeight NAV…
閱讀更多...
從零開始的云計算生活——番外，實戰腳本。

從零開始的云計算生活——番外，實戰腳本。

目錄 題目一&#xff1a;系統信息收集腳本 題目二&#xff1a;用戶管理配置腳本 題目三&#xff1a;磁盤空間管理腳本 題目四&#xff1a;網絡配置檢查腳本 題目五&#xff1a;系統日志分析腳本 題目一&#xff1a;系統信息收集腳本 編寫一個腳本名為 collect_system_info…
閱讀更多...
MySQL基礎知識（DDL、DML）

MySQL基礎知識（DDL、DML）

什么是數據庫&#xff1f; 數據庫&#xff1a;英文為 DataBase&#xff0c;簡稱DB&#xff0c;它是存儲和管理數據的倉庫。 注釋&#xff1a; 單行注釋&#xff1a;-- 注釋內容 或 # 注釋內容(MySQL特有)多行注釋&#xff1a; /* 注釋內容 */ 分類 SQL語句根據其功能被分為…
閱讀更多...
用volatile修飾數組代表什么意思，Java

用volatile修飾數組代表什么意思，Java

文章目錄 volatile 修飾數組引用的含義volatile 對數組元素無效總結 如何讓數組元素也具有 volatile 特性&#xff1f; 當用 volatile 關鍵字修飾一個數組時&#xff0c;它只保證數組引用的可見性和部分原子性&#xff0c;而不保證數組元素的可見性和原子性。 換句話說&#x…
閱讀更多...
最新文章

Copyright @ 2022~2023