Axios 是一個基于 Promise 的 HTTP 客戶端庫，用于瀏覽器和 Node.js 環境。它支持發送異步 HTTP 請求，并提供了簡潔的 API 來處理請求和響應。

1、安裝axios

因為axios是一個第三方庫，所以在使用之前我們需要先安裝第三方模塊。

安裝 Axios 需通過 ohpm 包管理器完成。在 DevEco Studio 終端執行命令后，庫文件會自動下載并集成到項目中。卸載時同樣通過 ohpm 清理依賴，確保項目無冗余文件。

安裝命令作用于鴻蒙（OpenHarmony）生態，需注意環境兼容性。安裝完成后，無需額外配置即可直接引入模塊。

安裝的命令為：

# 安裝
ohpm i @ohos/axios# 卸載
ohpm uninstall @ohos/axios

首先，我們打開DevEco Studio，點擊下方的終端，在終端中輸入安裝命令，等待安裝完成后即可。

2、axios的基本用法

Axios 的完整請求語法支持泛型參數，分別定義響應數據類型、完整響應結構及請求參數類型。配置對象包含以下關鍵字段：

• method：HTTP 方法（如 GET/POST），不區分大小寫，默認 GET
• url：目標服務器地址，支持絕對路徑或相對路徑
• headers：自定義請求頭，例如設置?Content-Type?為 JSON 格式
• params：URL 查詢參數，自動拼接到請求地址后
• data：請求體數據，用于 POST/PUT 等需要傳輸數據的場景

語法：

// 完整寫法
axios<string, AxiosResponse<string>, null>({method: "請求方式",  // 支持post/get/put/delete方法，不區分大小寫，默認為get方法url: '是用于請求的服務器 URL',  // 請求的地址headers: {'Content-Type': 'application/json'}, // 是即將被發送的自定義請求頭params: {參數名: 參數值   // 與請求一起發送的 URL 參數},data: {參數名: 參數值  // 作為請求主體被發送的數據},context: context // 基于應用程序的上下文，只適用于上傳/下載請求
}).then((res: AxiosResponse) => {// res 接收成功的結果 
}).catch((error: AxiosError) => {// error 接收失敗的結果
})

axios后<>內分別是返回，響應的核心數據類型，響應的數據類型，請求參數類型。

3、axios的請求別名

Axios 提供了簡潔的請求別名方法，涵蓋了常見的 HTTP 請求方式。這些別名方法可直接調用，無需顯式指定 method 參數。

3.1get請求

作用:客戶端通過請求從服務器獲取HTML、CSS、JavaScript、圖片或視頻等靜態資源。例如，瀏覽器發送HTTP請求加載網頁內容。

語法：

// 導入
import axios, { AxiosResponse } from '@ohos/axios'
// 發送get請求
axios.get<ResponseType, AxiosResponse<ResponseType>, RequestBodyType>('https://www.xxx.com/info', { params: { key: "value" } // query 參數})
.then((response: AxiosResponse) => {console.info("result:" + JSON.stringify(response.data));
})
.catch((error: AxiosError) => {console.error("result:" + error.message);
});

3.2post請求

作用：表單提交、文件上傳或API調用通過請求將數據發送到服務器。例如，用戶登錄時提交賬號密碼至服務端驗證。

語法：

import axios from 'axios';axios.post<ResponseType, AxiosResponse<ResponseType>, RequestBodyType>('https://www.xxx.com/info',{ key: "value" }, // Body 參數{headers: { 'Content-Type': 'application/json' }, // 請求頭params: {}, // 可選的 URL 查詢參數}
)
.then((response: AxiosResponse<string>) => {console.info("POST result:" + JSON.stringify(response.data));
})
.catch((error: AxiosError) => {console.error("POST error:" + error.message);
});

3.3put請求

作用：請求可觸發服務器端的特定處理邏輯，如數據庫更新、支付流程或數據分析。RESTful API中的POST或DELETE請求常用于此類場景。

語法：

import axios from 'axios';axios.put<ResponseType, AxiosResponse<ResponseType>, RequestBodyType>('https://www.xxx.com/info/path參數',{ key: "value" }, // PUT 請求體參數(Body參數）{headers: { 'Content-Type': 'application/json' }, // 請求頭 -> json以為的其他數據格式params: {key: "value"}, // 可選的 URL 查詢參數(query參數)}
)
.then((response: AxiosResponse<string>) => {console.info("PUT result:" + JSON.stringify(response.data));
})
.catch((error: AxiosError) => {console.error("PUT error:" + error.message);
});

3.4delete請求

作用：刪除數據。

語法：

import axios from 'axios';axios.delete<ResponseType, AxiosResponse<ResponseType>, RequestBodyType>('https://www.xxx.com/info/path參數',{headers: { 'Content-Type': 'application/json' }, // 請求頭params: { key: "value" }, // DELETE 請求通常用 query 參數// 如果需要 body，可以這樣傳：// data: { key: "value" }, // 某些 API 可能需要 body 參數}
)
.then((response: AxiosResponse<string>) => {console.info("DELETE result:" + JSON.stringify(response.data));
})
.catch((error: AxiosError) => {console.error("DELETE error:" + error.message);
});

4、axios基地址

axios基地址是axios實例的基礎URL路徑，它會被自動添加到所有相對路徑請求的前面。通過設置基地址可以簡化代碼，避免重復書寫相同的服務器地址前綴。

語法：

const req =  axios.create({// 基地址，后續請求的時候這部分可以省略baseURL:'https://api-vue-base.xxxxxx.net/'
})
// get 請求 直接寫 url 即可
const res = await req<string, JokeListResponse, null>({url: '/xxx/xxx',params: {num: 10}
})
AlertDialog.show({ message: JSON.stringify(res.data.data) })

綜上所述，Axios 作為一個基于 Promise 的強大 HTTP 客戶端庫，憑借其簡潔的 API 設計和跨平臺兼容性（支持瀏覽器與 Node.js 環境），為開發者提供了高效處理異步請求的解決方案。從安裝到實際應用，它通過 ohpm 包管理器實現無縫集成，配置簡單直觀；請求別名如 GET、POST、PUT 和 DELETE 簡化了常見操作；基地址設置則優化了代碼復用性，避免冗余。這些特性不僅提升了開發效率，還確保了請求處理的可靠性與可維護性。建議開發者在項目中積極實踐這些方法，結合錯誤處理機制，以構建更健壯的應用程序。如需進一步探索，可參考官方文檔深化學習。