ArkTs使用axios请求

在开发arkTs中也是支持axios的，以下就来详细讲解axios的封装及调用流程

安装 axios三方库

axios地址

在终端执行安装命令

ohpm install @ohos/axios

需要权限

ohos.permission.INTERNET

封装axios

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

import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios';
const service=axios.create({
  // 配置域名前缀
  baseURL:"https://devb2b.wsttrip.cn",
  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: '/b2b/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))
        })   
      })
  }
}