请求库-axios - 技术栈

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