鸿蒙开发之http请求封装

概述

HTTP（Hypertext Transfer Protocol，超文本传输协议）请求是客户端（如Web浏览器或API调用者）向服务器发送的一种请求，用于请求获取（或发送）某个资源。HTTP请求由多个部分组成，包括请求行（request line）、请求头部（headers）和请求体（body，可选）。

为什么要封装http

没有封装前，代码写的很冗余，想通代码到处都有.

以下是具体的代码封装流程

定义接口

interface HdRequestOptions {
  baseURL?: string
}

type HdParams = Record<string, string | number | boolean>

export interface HdResponse<T> {
  code: number
  message: string
  data: T
}

设置基本URL

private baseURL: string

constructor(options: HdRequestOptions) {
  this.baseURL = options.baseURL || ''
}

设置请求参数

const httpInstance = http.createHttp()

const options: http.HttpRequestOptions = {
  header: {
    'Content-Type': 'application/json',
    // 'Authorization':'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEiLCJpYXQiOjE3MDY1MTEwNDEsImV4cCI6MTcwNjUxNDY0MX0.gOPB7-c7VP5jFCrJpg0orqZ34kOopqsxrkOCuovkcA4'
  },
  method,
  expectDataType: http.HttpDataType.OBJECT
}

let fullUrl = this.baseURL + path

if (method === http.RequestMethod.GET && extraData) {
  const strArr = Object.keys(extraData).map(key => `${key}=${(extraData as HdParams)[key]}`)
  fullUrl += `?${strArr.join('&')}`
} else {
  options.extraData = extraData
}

const user = authStore.getUser()
if (user.token && options.header) {
  options.header['Authorization'] = `Bearer ${user.token}`
}

处理响应代码

return httpInstance.request(fullUrl, options).then((res) => {
  if (res.result) {
    const result = res.result as HdResponse<T>
    if (result.code === 10000) {
      return result
    }
    if (result.code === 401) {
      authStore.delUser()
      router.replaceUrl({
        url: 'pages/LoginPage'
      }, router.RouterMode.Single)
    }
  }
  return Promise.reject(res.result)
}).catch((err: BusinessError) => {
  promptAction.showToast({ message: err.message || '网络错误' })
  return Promise.reject(err)
}).finally(() => {
  httpInstance.destroy()
})

由于鸿蒙使用的代码底层逻辑是ts, 所以http提供的方法也要进行封装成泛型方法, 这样方便使用调用

get<T>(url: string, data?: Object): Promise<HdResponse<T>> {
  return this.request<T>(url, http.RequestMethod.GET, data)
}

post<T>(url: string, data?: Object): Promise<HdResponse<T>> {
  return this.request<T>(url, http.RequestMethod.POST, data)
}

put<T>(url: string, data?: Object): Promise<HdResponse<T>> {
  return this.request<T>(url, http.RequestMethod.PUT, data)
}

delete<T>(url: string, data?: Object): Promise<HdResponse<T>> {
  return this.request<T>(url, http.RequestMethod.DELETE, data)
}

然后直接导出

export const hdHttp = new HdHttp({ baseURL: '' })

如果调用

hdHttp.get<QuestionDetail>(`question/${this.questionId}`)
  .then(res => {
    this.question = res.data
    this.loading = false
  })