返璞归真——HarmonyOS 网络请求工具库封装

前言

HarmonyOS 原生网络请求的用法比较麻烦，还是有必要封装下，先看它的原生写法：

// 引入包名
import http from '@ohos.net.http';

// 每一个httpRequest对应一个HTTP请求任务，不可复用
let httpRequest = http.createHttp();
// 用于订阅HTTP响应头，此接口会比request请求先返回。可以根据业务需要订阅此消息
// 从API 8开始，使用on('headersReceive', Callback)替代on('headerReceive', AsyncCallback)。 8+
httpRequest.on('headersReceive', (header) => {
    console.info('header: ' + JSON.stringify(header));
});
httpRequest.request(
    // 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
    "EXAMPLE_URL",
    {
        method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
        // 开发者根据自身业务需要添加header字段
        header: {
            'Content-Type': 'application/json'
        },
        // 当使用POST请求时此字段用于传递内容
        extraData: {
            "data": "data to send",
        },
        expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型
        usingCache: true, // 可选，默认为true
        priority: 1, // 可选，默认为1
        connectTimeout: 60000, // 可选，默认为60000ms
        readTimeout: 60000, // 可选，默认为60000ms
        usingProtocol: http.HttpProtocol.HTTP1_1, // 可选，协议类型默认值由系统自动指定
    }, (err, data) => {
        if (!err) {
            // data.result为HTTP响应内容，可根据业务需要进行解析
            console.info('Result:' + JSON.stringify(data.result));
            console.info('code:' + JSON.stringify(data.responseCode));
            // data.header为HTTP响应头，可根据业务需要进行解析
            console.info('header:' + JSON.stringify(data.header));
            console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
            // 取消订阅HTTP响应头事件
            httpRequest.off('headersReceive');
            // 当该请求使用完毕时，调用destroy方法主动销毁
            httpRequest.destroy();
        } else {
            console.info('error:' + JSON.stringify(err));
            // 取消订阅HTTP响应头事件
            httpRequest.off('headersReceive');
            // 当该请求使用完毕时，调用destroy方法主动销毁。
            httpRequest.destroy();
        }
    }
);

这么一大挂，怎么看也不像 axios 那样 axios.get(url) 一行代码就能够请求了。原生的HarmonyOS 网络请求可能更偏向于提供底层功能，类似于 WEB 中的 XMLHttpRequest，对于前端比较习惯的可能是下面的方式：

import http from '../utils/http'

export const login = (params: any) => http.postForm('/api/example/login', params)

export const login2 = (params: any) => http.postJson('/api/example/login', params)

export const login3 = (params: any) => http.get('/api/example/login', params)

login({}).then(res => {
	// ...
})

简洁，非常简洁~ 下面我们来看看是怎么封装的。

封装

interface EasyHttpOptions {
  baseUrl?: string
  connectTimeout?: number
  readTimeout?: number
}

class EasyHttp {
  protected options: EasyHttpOptions = {
    baseUrl: '',
    connectTimeout: 6 * 1000,
    readTimeout: 6 * 1000
  }

  constructor(options: EasyHttpOptions = {}) {
    Object.assign(this.options, options)
  }

  request(url: string, options: http.HttpRequestOptions = {}) {
    const {baseUrl, connectTimeout, readTimeout} = this.options
    const httpRequest = http.createHttp()

    return new Promise<http.HttpResponse>((resolve, reject) => {
      httpRequest.request(
        baseUrl + url,
        {
          expectDataType: http.HttpDataType.OBJECT, // 可选，指定返回数据的类型
          connectTimeout, // 可选，默认为60000ms
          readTimeout, // 可选，默认为60000ms
          ...options
        }
      ).then(res => {
        if (res.code === 200) {
          const { code } = (res.result || {}) as any
          if (code === 0) {
            resolve(res)
          } else {
            reject(res)
          }
        } else {
          reject(res)
        }
      }).catch(err => {
        reject(err)
      })
    })
  }

  get(url: string, params: Record<string, any> = {}, options: http.HttpRequestOptions = {}) {
    return this.request(`${url}?${stringify(params)}`, {
      method: http.RequestMethod.GET,
      ...options
    })
  }

  postForm(url: string, data: Record<string, any>, options: http.HttpRequestOptions = {}) {
    return this.request(url, {
      method: http.RequestMethod.POST,
      extraData: stringify(data),
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      ...options
    })
  }

  postJson(url: string, data: Record<string, any>, options: http.HttpRequestOptions = {}) {
    return this.request(url, {
      extraData: data,
      method: http.RequestMethod.POST,
      header: {
        'Content-Type': 'application/json'
      },
      ...options
    })
  }
}

export default new EasyHttp({
  baseUrl: 'https://demo.example.com'
})

上面有个序列化方法 stringify 如下：

function stringify(obj: Record<string, any>) {
  return Object.keys(obj)
    .map((key) => `${key}=${encodeURIComponent(obj[key])}`)
    .join('&')
}

以上封装属于业务层的常规封装，值得注意的是：

每一个HttpRequest对象对应一个HTTP请求。如需发起多个HTTP请求，须为每个HTTP请求创建对应HttpRequest对象。最多只能创建100个HttpRequest对象。

正因如此，它才更有封装的必要性。

用法

const http = new EasyHttp({
  baseUrl: 'https://demo.example.com'
})

export const login = (params: any) => http.postForm('/api/example/login', params)

总结

尽管 HarmonyOS 开发生态（例：ohpm）目前尚显薄弱，但这正是我们展现创造力的绝佳时机。每个成熟的生态系统都需经历从无到有的过程，HarmonyOS 也不例外。希望 HarmonyOS 开发生态未来会更好，也希望会有更多的开发者能参与生态建设！