【OpenHarmony】 鸿蒙网络请求库之axios

---

📚往期笔录记录🔖：

🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

🔖记录一场鸿蒙开发岗位面试经历~

🔖持续更新中……

---

简介

Axios，是一个基于 promise 的网络请求库，可以运行 node.js 和浏览器中。本库基于Axios 原库v1.3.4版本进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。

• http 请求
• Promise API
• request 和 response 拦截器
• 转换 request 和 response 的 data 数据
• 自动转换 JSON data 数据

下载安装

ohpm install @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	拦截器。参考 拦截器 的使用

使用示例

使用前在demo中entry–>src–>main–>ets–>common–>Common.ets文件中改为正确的服务器地址，在entry–>src–>main–>resources–>rawfile目录下添加正确的证书，才可正常的使用demo。

发起一个 GET 请求

axios支持泛型参数，由于ArkTS不再支持any类型，需指定参数的具体类型。
如：axios.get<T = any, R = AxiosResponse, D = any>(url)

• T: 是响应数据类型。当发送一个 POST 请求时，客户端可能会收到一个 JSON 对象。T 就是这个 JSON 对象的类型。默认情况下，T 是 any，这意味着可以接收任何类型的数据。
• R: 是响应体的类型。当服务器返回一个响应时，响应体通常是一个 JSON 对象。R 就是这个 JSON 对象的类型。默认情况下，R 是 AxiosResponse，这意味着响应体是一个 AxiosResponse 对象，它的 data 属性是 T 类型的
• D: 是请求参数的类型。当发送一个 GET 请求时，可能会在 URL 中添加一些查询参数。D 就是这些查询参数的类型。参数为空情况下，D 是 null类型。

import axios from '@ohos/axios'
interface userInfo{
   
  id: number
  name: string,
  phone: number
}

// 向给定ID的用户发起请求
axios.get<userInfo, AxiosResponse<userInfo>, null>('/user?ID=12345')
.then((response: AxiosResponse<userInfo>)=> {
   
  // 处理成功情况
  console.info("id" + response.data.id)
  console.info(JSON.stringify(response));
})
.catch((error: AxiosError)=> {
   
  // 处理错误情况
  console.info(JSON.stringify(error));
})
.then(()=> {
   
  // 总是会执行
});

// 上述请求也可以按以下方式完成（可选）
axios.get<userInfo, AxiosResponse<userInfo>, null>('/user', {
   
  params: {
   
    ID: 12345
  }
})
.then((response:AxiosResponse<userInfo>) => {
   
  console.info("id" + response.data.id)
  console.info(JSON.stringify(response));
})
.catch((error:AxiosError) => {
   
  console.info(JSON.stringify(error));
})
.then(() => {
   
  // 总是会执行
});

// 支持async/await用法
async function getUser() {
   
  try {
   
        const response:AxiosResponse = await axios.get<string, AxiosResponse<string>, null>(this.getUrl);
        console.log(JSON.stringify(response));
      } catch (error) {
   
    console.error(JSON.stringify(error));
  }
}

发送一个 POST 请求

interface user {
   
  firstName: string,
  lastName: string
}
   axios.post<string, AxiosResponse<string>, user>('/user', {
   
     firstName: 'Fred',
     lastName: 'Flintstone'
   })
   .then((response: AxiosResponse<string>) => {
   
     console.info(JSON.stringify(response));
   })
   .catch((error) => {
   
  console.info(JSON.stringify(error));
});

发起多个并发请求

 const getUserAccount = ():Promise<AxiosResponse> => {
   
      return axios.get<string, AxiosResponse<string>, null>('/user/12345');
    }

 const getUserPermissions = ():Promise<AxiosResponse> => {
   
      return axios.get<string, AxiosResponse<string>, null>('/user/12345/permissions');
    }

 Promise.all<AxiosResponse>([getUserAccount(), getUserPermissions()])
 .then((results:AxiosResponse[]) => {
   
        const acct = results[0].data as string;
        const perm = results[1].data as string;
      });

使用说明

axios API

通过向 axios 传递相关配置来创建请求

axios(config)

// 发送一个get请求
axios<string, AxiosResponse<string>, null>