数据接口请求采用鸿蒙的http模块，没有封装前，代码写的很冗余，想通的代码到处都有,使用了类结合泛型方法统一封装了泛型方法，并使用泛型接口解决了不同接口返回不同数据的类型的问题，在使用的组件中，只需要关注调哪一种方法即可，并且只需要关注返回的实体是什么类型即可。中间的数据请求过程代码无需重写,给我们的开发带来极大地便利~

开始

这一期我们来封装一个项目都能用到的网络请求库,上代码！

开发环境

• Mac

• DevEco Studio NEXT Developer Preview2

• HarmonyOS next Developer Preview2

• 手机：Mate 60Pro (HarmonyOS NEXT Developer Preview2)

使用:

• 首先在module.json5中配置基础网络权限

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

• 定义baseURL基础地址常量

  export const BASE_URL = 'http：//----' 
  

• 封装泛型工具类

  export class Result<T> {
     code: number = 0
     msg: string = ''
     data: T | null = null 
  }

• 封装一个公共的request方法来支持get/post/put/delete方法

• 
  const httpRequest = http.createHttp()
  
  async function requestHttp<T>(url: string = "", method: http.RequestMethod = http.RequestMethod.GET, data?: object): Promise<T> {
    let urlStr = BASE_URL + url
    // 手动拼接
    if (method === http.RequestMethod.GET) {
      if (data && Object.keys(data).length) {
        urlStr += "?" + Object.keys(data).map(key =>  {
          if(data[key]){
            return `${key}=${data[key]}`
          }
          return ""
        }).join('&')
      }
    }
    // 设置请求头
    const config: http.HttpRequestOptions = {
      header: {
        'Content-Type': 'application/json',
        "Authorization": AppStorage.Get(TOKEN_KEY) || ""
      },
      method,
      readTimeout: 10000, // 超时时间
      extraData: method === http.RequestMethod.GET ? "" : data
    }
    try {
      const res = await httpRequest.request(urlStr, config)
      if (res.responseCode === 401) {
        promptAction.showToast({ message: 'token超时' })
        AppStorage.Set(TOKEN_KEY, "") // 删除token 
        new UserSettingClass(getContext()).setUserToken("") // 清空首选项的token
        router.replaceUrl({
          url: 'pages/Login/Login'
        })
        return Promise.reject(new Error("token不存在或超时"))
      }else if(res.responseCode === 404) {
        return Promise.reject(new Error('请求地址不正确'))
      }
      else {
        const result = JSON.parse(res.result as string) as Result<T>
        if (result.code === 200) {
          // 执行成功
          return result.data as T // 直接返回数据
        }
        else {
          return Promise.reject(new Error(result.msg))
        }
      }
    } catch (error) {
      promptAction.showToast({ message: error.message })
      return Promise.reject(error)
    }
    finally {
      httpRequest.destroy(); // 销毁请求
    }
  }
  
  // 导出一个类的静态方法
  export class Request {
    static get<T>(url: string, data?: object): Promise<T> {
      return requestHttp<T>(url, http.RequestMethod.GET, data)
    }
  
    static post<T>(url: string, data?: object): Promise<T> {
      return requestHttp<T>(url, http.RequestMethod.POST, data)
    }
  
    static delete<T>(url: string, data?: object): Promise<T> {
      return requestHttp<T>(url, http.RequestMethod.DELETE, data)
    }
  
    static put<T>(url: string, data?: object): Promise<T> {
      return requestHttp<T>(url, http.RequestMethod.PUT, data)
    }
  }
  
  

• 总结:

• 封装请求-拼接基础地址-传入参数
• 解构返回的数据-判断状态
• 200 认为成功直接返回data数据
• 200以外 401 认为是token超时
• 500认为是服务器错误
• 最后暴露一个类的四个静态方法 可以方便的调用 get/put/delete/post