鸿蒙第三方库中心仓---Axios

Axios 是一个著名的基于 JavaScript 的开源库，用于浏览器和 Node.js 等环境中发送 HTTP 请求。它支持 Promise API，并且可以处理 XMLHttpRequests 和 Fetch API 背后的复杂性，为开发者提供了一种简洁易用的方式来实现 AJAX（Asynchronous JavaScript and XML）请求。

在HarmonyOS中，官方提供了@ohos/net.http 模块进行网络访问。它是官方提供的基础HTTP数据请求能力库，直接提供了对HTTP协议的底层支持，开发者可以通过这个模块发送GET、POST等HTTP请求，并处理响应结果。由于它是系统级别的API，其优点在于性能和兼容性得到保证，适用于基本的HTTP通信需求。

1. 下载安装第三方库(终端窗口执行):

ohpm install @ohos/axis

2. 在项目文件(module.json5)中配置网络权限:

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
]

2. 实际应用：

 // 创建一个 axios 实例 内部做一些 axios 的通用配置
              const axiosInstance = axios.create({
                // axiosInstance 返回的还是 axios 只不过是带有基地址的axios
                baseURL: BASE_URL // 添加基地址
              })
              // axios.post<参数1,参数2,参数3> 泛型
              // 参数1: 没啥用 会被第二个参数覆盖
              // 参数2(重要): 用于指定后端返回数据的类型Axios提供的<参数内层返回数据(自定义的)<不同接口有一些数据可变的(用泛型需要什么参数 直接调用)>,null(没啥用)>
              // 参数3(重要): 服务器请求的参数
              const res =
                await axiosInstance.post<null, AxiosResponse<ServiceResponse<ServiceResponseResult>, null>, PostUserLoginPasswdData>('/user/login/passwd',
                  { passwd: '888itcast.CN764%...', phone: '120666666666' })
              AlertDialog.show({ message: JSON.stringify(res, null, 2) })

4. 最后可以将类型(参数2)进行抽取：

// type 类型别名 (类似变量声明的关键词 const let)
type AxiosResponseData<T> = AxiosResponse<ServiceResponse<T>, null>

最后在参数2 的位置调用 并传入响应的动态的类型

二 . 对象的方式 使用Axios

import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios'

// 实例化 通用配置
const httpInstance = axios.create({
  baseURL: 'https://meikou-api.itheima.net/', // 基地址
  timeout: 5000 // 响应最大时间
})

// 拦截器配置
// 请求拦截器
// token配置等
httpInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  return config
}, (error: AxiosError) => {
  return Promise.reject(error)
})

// 添加响应拦截器
// 错误统一处理等
httpInstance.interceptors.response.use((response: AxiosResponse) => {
  return response
}, (error: AxiosError) => {
  return Promise.reject(error)
})
// 通用的响应类型 外层是相同的替换内容 换成泛型即可
interface HttpResponse<T> {
  code: string
  msg: string
  result: T
}

export { httpInstance, HttpResponse }

 // 请求网络数据
  async getData() {
    // httpInstance.get('/home/banner')
    // 可以通过对象的方式发送请求
    // url 请求地址
    // method 请求方法 大小写不区分 get省略
    const res: AxiosResponse<HttpResponse<Banner[]>> = await httpInstance({
      url: '/home/banner',
      method: 'get'
    })
    Log.info(res.data)
  }

import axios, { InternalAxiosRequestConfig, AxiosError, AxiosResponse, AxiosRequestConfig } from '@ohos/axios'
import { auth } from './auth'
import { promptAction, router } from '@kit.ArkUI'

export const baseURL: string = 'https://meikou-api.itheima.net/'

// 实例化 通用配置
const httpInstance = axios.create({
  // 美蔻的基地址
  baseURL,
  // 超时事件最长多久不响应，就认为是失败
  timeout: 5000
})

// 拦截器配置
// 请求拦截器
// token配置等
httpInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  // 有 token 就携带
  if (auth.getUser()
    .token) {
    // 可以吧 token 改错来进行测试
    config.headers['Authorization'] = `Bearer ${auth.getUser()
      .token}`
  }
  return config
}, (error: AxiosError) => {
  return Promise.reject(error)
})

// 增加类型
export interface APIErrorType {
  message: string
  msg: string
  code: string
}

// 添加响应拦截器
// 错误统一处理等
httpInstance.interceptors.response.use((response: AxiosResponse) => {
  return response
}, (error: AxiosError<APIErrorType>) => {
  // 请求异常
  // axios会将异常请求的响应设置在 error.response 中
  // error.response?.status 可以获取状态码
  // AlertDialog.show({
  //   message: JSON.stringify(error.response?.data) + error.response?.status
  //   // message: JSON.stringify(error.response?.status)
  // })

  if (error.response?.status == 400) {
    promptAction.showToast({
      message: error.response.data.msg
    })
  }
  if (error.response?.status == 401) {
    // 提示用户 重新登录
    promptAction.showToast({
      message: '登录信息过期，请重新登录'
    })
    // 原本的用户信息 删掉
    auth.removeUser()
    // 去登录页
    router.pushUrl({
      url: 'pages/LoginPage'
    })
  }
  AlertDialog.show({
    message: JSON.stringify(error.response)
  })

  return Promise.reject(error)
})

// 通用的响应类型，外层都是相同的
// result 不同，利用泛型来动态设置即可
interface HttpResponse<T> {
  code: string
  msg: string
  result: T // result通过泛型动态设置
}

// 通用的请求方法，将 类型，返回值，参数都封装到一起 简化调用
// AxiosRequestConfig<null> 参数类型
// Promise<AxiosResponse<HttpResponse<T>, null>> 返回值类型
// D=null 设置默认值
function fetchData<T, D = null>(config: AxiosRequestConfig<D>): Promise<AxiosResponse<HttpResponse<T>, null>> {
  return httpInstance <null, AxiosResponse<HttpResponse<T>>, D>(config)
}

export { httpInstance, HttpResponse, fetchData }