基于Axios实现网络请求鸿蒙示例代码

本文原创发布在华为开发者社区，更多鸿蒙场景化示例请见华为开发者联盟官网“行业实践与常见问题”专题页。

介绍

本示例对Axios部分功能进行封装，通过axios.request()方法实现网络请求功能，用户可更改Config配置文件以访问不同地址。

基于 Axios 实现网络请求源码链接

效果预览

实现思路

1. package.json5文件中配置axios依赖。

  "dependencies": {
    "@ohos/axios": "^2.2.0"
  }

2. 封装自定义工具类，封装请求方法。

  async request(url: string): Promise<Result> {
    let result: Result = {}
    let res: AxiosResponse = await axios.request({ url: url, method: 'get' })
    result.statue = res ? JSON.stringify(res.status) : '';
    result.data = res ? JSON.stringify(res.data) : '';
    result.statusText = res ? res.statusText : '';
    return result
  }

3. 定义Config接口并实现。

  export const demoConfig1: DemoConfig = {
    baseUrl: getContext().resourceManager.getStringByNameSync('url_develop'), // 基础请求地址
    ......
  } 

4. 调用工具类请求方法获取响应数据。

  this.startTime = new Date().getTime()
  this.axiosUtil.request(this.baseUrl)
    .then((res) => {
      this.status = res.statue
      this.message = res.data
      this.endTime = new Date().getTime()
      hilog.error(0x0000, 'testTag', '%{public}s', JSON.stringify(res));
    })
    .catch((err: BusinessError) => {
      hilog.error(0x0000, 'testTag', 'err code == %{public}s msg == %{public}s', err.code,                   err.message);
    })