鸿蒙应用中的axios封装【TS版】

1、安装 axios

ohpm install @ohos/axios

1、AxiosInstance.ets

创建 axios 实列，设置请求响应拦截器

import { promptAction } from '@kit.ArkUI'
import axios, { AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios'
import { Log } from '../utils/Log'

const TAG = 'AxiosInstance'

// 开发测试环境
// const BASEURL = 'https://teacher365.com/sit'
// 生产环境
const BASEURL = 'https://teacher365.com/prod'

let axiosInstance: AxiosInstance = axios.create({
  baseURL: BASEURL,
  timeout: 5000, //请求超时的时间
  headers: {
    // 前端允许接受的数据类型
    Accept: "application/json",
    // 前端后端发送的数据类型
    'Content-Type': 'application/json;charset=UTF-8'
  }
})


// axios实例请求拦截
axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  Log.showInfo(TAG, 'AxiosRequest = %{public}s', JSON.stringify(config))
  const token = AppStorage.get<string>('app_token')
  token && (config.headers['Authorization'] = `Bearer ${token}`)
  return config
}, (error: AxiosError) => {
  return Promise.reject(error)
})

// axios实例拦截响应
axiosInstance.interceptors.response.use((response: AxiosResponse) => {
  Log.showInfo(TAG, 'AxiosRequest = %{public}s', JSON.stringify(response))
  // 拦截响应，判断是否有token，如果有，就将token存入本地
  if (response.status === 200) {
    return response.data
  } else {
    Log.showInfo(TAG, 'AxiosResponse Fail = %{public}s', JSON.stringify(response))
    return Promise.reject(response.statusText)
  }
}, (error: AxiosError) => {
  Log.showInfo(TAG, 'AxiosResponse Error = %{public}s', JSON.stringify(error))
  promptAction.showToast({
    message: error.message
  })
  return Promise.reject(error.message)
})

export default axiosInstance

2、Request.ets

统一封装 post、get 请求

import axiosInstance from "./AxiosInstance"

// 服务端返回的数据格式，类型约定好
interface DataRes<T> {
  code: number
  message: string
  data: T
}

export default class Request {

  static post<T>(url: string, param: Record<string, Object>): Promise<T> {
    return new Promise((resolve, rejected) => {
      axiosInstance.post(url, param).then((res: Object) => {
        const data = res as DataRes<T>
        if (data && data.code === 200) {
          resolve(data.data)
        } else {
          rejected(data.message)
        }
      }).catch((message: string) => {
        rejected(message)
      })
    })
  }

  static get<T>(url: string, param: Record<string, Object>): Promise<T> {
    return new Promise((resolve, rejected) => {
      axiosInstance.get(url, {
        params: param
      }).then((res: Object) => {
        const data = res as DataRes<T>
        if (data && data.code === 200) {
          resolve(data.data)
        } else {
          rejected(data.message)
        }
      }).catch((message: string) => {
        rejected(message)
      })
    })
  }

}

3、TicketApi.ets

import Request from '../common/http/Request'

export interface Ticket {
  id: number
  ticketName: string
  price: number
  ticketNotice: string
  ticketType: string
  ticketStatus: number
}

export function getAllTickets(param: Record<string, Object>) {
  return Request.post<Ticket[]>('api/ticket/list', param)
}

export function getTicketDetail(param: Record<string, Object>) {
  return Request.post<Ticket>('api/ticket/detail', param)
}

4、业务层调用

import { getAllTickets, Ticket} from '../api/TicketApi'

const TAG: string = 'TicketList'

@Entry
@Component
struct TicketList {
  @State data: Ticket[] = []

  aboutToAppear(): void {
    let param: Record<string, Object> = {}
    param['appId'] = 'xxxxxxxx'
    getAllTickets(param).then((res) => {
      this.data = res
    })
  }
  ...
}