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 简化了常见操作；基地址设置则优化了代码复用性，避免冗余。这些特性不仅提升了开发效率，还确保了请求处理的可靠性与可维护性。建议开发者在项目中积极实践这些方法，结合错误处理机制，以构建更健壮的应用程序。如需进一步探索，可参考官方文档深化学习。