🤍 前端開發工程師、技術日更博主、已過CET6
🍨 阿珊和她的貓_CSDN博客專家、23年度博客之星前端領域TOP1
🕠 牛客高級專題作者、打造專欄《前端面試必備》 、《2024面試高頻手撕題》、《前端求職突破計劃》
🍚 藍橋云課簽約作者、上架課程《Vue.js 和 Egg.js 開發企業級健康管理項目》、《帶你從入門到實戰全面掌握 uni-app》

引言

在前端開發中，與后端服務的通信是常見的需求。Axios 是一個基于 Promise 的 HTTP 客戶端，它可以在瀏覽器和 Node.js 環境中使用，用于發出 HTTP 請求。本文將介紹如何使用 Axios 發送 GET 和 POST 請求，以及如何處理響應和錯誤。

Axios 簡介

Axios 是一個流行的 HTTP 客戶端，它提供了一些特性來簡化 HTTP 請求的過程，例如攔截請求和響應、轉換請求和響應數據、取消請求等。Axios 支持所有現代瀏覽器，并且可以在 Node.js 環境中使用。

發送 GET 請求

GET 請求用于從服務器檢索數據。以下是使用 Axios 發送 GET 請求的基本示例：

import axios from 'axios';// 發送 GET 請求
axios.get('https://api.example.com/data').then(response => {// 處理響應數據console.log(response.data);}).catch(error => {// 處理錯誤console.error('Error fetching data:', error);});

添加請求參數

你可以通過在 URL 中添加查詢字符串或者使用 params 選項來添加請求參數：

axios.get('https://api.example.com/data', {params: {search: 'keyword',page: 1}
});

發送 POST 請求

POST 請求通常用于向服務器發送數據以進行處理。以下是使用 Axios 發送 POST 請求的基本示例：

import axios from 'axios';// 發送 POST 請求
axios.post('https://api.example.com/data', {key1: 'value1',key2: 'value2'
}).then(response => {// 處理響應數據console.log(response.data);}).catch(error => {// 處理錯誤console.error('Error posting data:', error);});

設置請求頭

有時你可能需要設置特定的請求頭，例如設置 Content-Type 或者認證信息：

axios.post('https://api.example.com/data', data, {headers: {'Content-Type': 'application/json','Authorization': 'Bearer your_token_here'}
});

處理響應和錯誤

Axios 的請求方法返回一個 Promise，你可以使用 .then() 和 .catch() 方法來處理響應和錯誤。

響應對象

響應對象包含以下重要屬性：

• data: 服務器響應的主體內容。
• status: HTTP 狀態碼。
• statusText: HTTP 狀態信息。
• headers: 響應頭。
• config: 請求配置。

錯誤處理

錯誤對象可能包含以下屬性：

• message: 錯誤信息。
• code: 錯誤代碼。
• response: 如果服務器響應了一個狀態碼，超出 2xx 范圍，這個屬性會包含服務器的響應信息。

結論

Axios 是一個功能強大的 HTTP 客戶端，它簡化了 HTTP 請求的過程，并提供了豐富的特性來處理請求和響應。無論是發送 GET 請求來檢索數據，還是發送 POST 請求來提交數據，Axios 都提供了一種簡單而一致的方式來處理這些操作。通過掌握 Axios 的基本用法，你可以更有效地與后端服務進行通信。