使用 axios 请求的 HarmonyOS

简介

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

安装 axios三方库

安装

ohpm install @ohos/axios

我们打开项目工程，打开终端执行上面的命令，如图所示：

安装成功后oh-package.json5配置文件中找到Axios的配置信息和对应的版本号，如图所示：

在oh_modules目录中也会安装这个三方库，如图所示：

需要权限

ohos.permission.INTERNET

在我们请求网络数据，首先需要申请权限，在module.json5文件中申请网络访问权限。如图所示

封装axios

创建axios封装ets的文件，路径：src/main/ets/model/Request.ets

import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios';
const service=axios.create({
  // 配置域名前缀
  baseURL:"https://xxx",
  headers: {
    'Content-Type': 'application/json',
    "Channel":"B2B"
  },
  method:"post",
})
// 添加请求拦截器
service.interceptors.request.use((config:InternalAxiosRequestConfig) => {
  // 对请求数据做点什么
  return config;
}, (error:AxiosError) => {
  // 对请求错误做些什么
  return Promise.resolve(error);
});
// 添加响应拦截器
service.interceptors.response.use((response:AxiosResponse)=> {
  // 对响应数据做点什么
  return response;
}, (error:AxiosError)=> {
  // 对响应错误做点什么
  return Promise.resolve(error);
});
export default service;

然后创建统一管理api目录及api文件，路径：src/main/ets/api/User.ets

import httpRequest from '../model/Request'
export function  User(param:any){
  return httpRequest({
    // 接口地址
    url: '/account/login',
    method: 'post',
    data:param
  })
}

调用封装接口

任意一个UI页面

import {User} from '../../api/User'

@Entry
@Component
struct Index {
  build() {
    Button("提交注册", { type: ButtonType.Normal, stateEffect: true })
      .borderRadius(50)
      .width('100%')
      .height(45)
      .margin({ top: 35 })
      .fontSize(16)
      .onClick(() => {
        User({
          "accountName": "liu9470",
          "password": "123456"
        }).then((res)=>{
          console.info(JSON.stringify(res))
        }).catch((err)=>{
          console.info(JSON.stringify(err))
        })   
      })
  }
}