[ArkTS]第三方库-ohos/axios

​

 随着鸿蒙HarmonyOS NEXT不断发展，越来越多的开发者开始为其生态开发应用。而在开发过程中，HTTP请求是必不可少的一部分。在鸿蒙系统中，ohos/axios 是一个轻量级且高效的第三方库，可以帮助开发者更方便地处理网络请求。

什么是 ohos/axios？

ohos/axios 是一个适配于HarmonyOS NEXT的 HTTP 客户端库，其灵感来自于前端开发中常用的 axios 库。它提供了丰富的 API，支持 Promise 风格的请求处理，并且能够很好地与鸿蒙的ArkTS开发环境集成。

特性

1. 支持 Promise：使用 Promise 处理异步请求，使代码更加清晰简洁。
2. 请求与响应拦截器：可以在请求发送和响应返回时，执行自定义逻辑。
3. 自动处理 JSON 数据：简化了数据的序列化和反序列化过程。
4. 支持多种请求方式：如 GET、POST、PUT、DELETE 等。

安装

在鸿蒙项目中使用 ohos/axios，首先需要通过 npm 安装该库。

ohpm install @ohos/axios

然后，在代码中引入：

import axios from '@ohos/axios';

需要权限

ohos.permission.INTERNET

接口和属性列表

接口列表

接口	参数	功能
axios(config)	[config]：请求配置	发送请求
axios.create(config)	[config]：请求配置	创建实例
axios.request(config)	[config]：请求配置	发送请求
axios.get(url[, config])	url：请求地址 [config]：请求配置	发送get请求
axios.delete(url[, config])	url：请求地址 [config]：请求配置	发送delete请求
axios.post(url[, data[, config]])	url：请求地址 data：发送请求体数据 [config]：请求配置	发送post请求
axios.put(url[, data[, config]])	url：请求地址 data：发送请求体数据 [config]：请求配置	发送put请求

属性列表

属性	描述
axios.defaults[‘xxx’]	默认设置 。值为请求配置 [config] 中的配置项 例如 axios.defaults.headers 获取头部信息
axios.interceptors	拦截器。参考 [拦截器] 的使用

实际案例

我们实现一个post的登录请求，首先创建一个axios实例

export const service = axios.create({
  baseURL:"http://192.168.2.63:3000", //本地服务器IP地址与端口
  timeout:3000,
});

拦截器

axios.interceptors.request.use((config:InternalAxiosRequestConfig) => {
  return config;
},(error:AxiosError)=>{
  return Promise.reject(error)
});

axios.interceptors.response.use((response:AxiosResponse) => {
  return response;
},(error:AxiosError) => {
  return Promise.reject(error)
})

创建一个post请求

export function loginRequest(data:loginData){
  return service({
    url:'/login',
    method: 'post',
    data: data
  })
}

在登录页面创建登录方法，在登录方法里引用这个post请求

async login() {
    const form: loginData = {
      username: this.username
    }

    try {
      const res: AxiosResponse = await loginRequest(form);
      if (res.status == 200) {
        console.log("result :"  +JSON.stringify(res))
        AppStorage.setAndRef("userId", res.data.userId);
        AppStorage.setAndRef("username", this.username);
        router.replaceUrl({ url: "pages/HomePage" });
        promptAction.showToast({
          message: "登录成功",
          duration: 2000
        });
      } else if (res.status == 400) {
        promptAction.showToast({
          message: "该用户名已被使用",
          duration: 2000
        });
      } else {
        promptAction.showToast({
          message: "哦豁,网络出现异常",
          duration: 2000
        });
      }
    } catch (error) {
      promptAction.showToast({
        message: "系统出现问题，请稍后尝试",
        duration: 2000
      });
    }
  }

由于示例，我们后台单纯就接受username这一个字段，返回状态和userId

后台反馈：

​