HarmonyOS鸿蒙Next中http请求的封装

HarmonyOS鸿蒙Next中http请求的封装 １　自定义请求消息头
２　支持GET和POST
３　将拿到的JSON数据 可以封装转化成对象或者LIST

4 回复

网络请求axios三方库可以支持自定义请求头和转换数据

[@ohos/axios](https://ohpm.openharmony.cn/#/cn/detail/)

更多关于HarmonyOS鸿蒙Next中http请求的封装的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


【解决方案】

  • 方案一：使用Network Kit，参考 http请求封装。

    • 定义请求头
      // 设置请求对象
let config: http.HttpRequestOptions = {
  // method同名方法赋值，参数名和属性名相同时只需要写一个method等价于method:method
  method,
  // 超时时间
  readTimeout: 10000,
  // get的extraData参数在上面处理过了
  extraData: method === http.RequestMethod.GET ? '' : data || {} as EmptyInterface,
  // 响应参数的类型,指定为对象后有BUG，当结果有问题时，项目会直接瘫痪
  // expectDataType: http.HttpDataType.OBJECT,
  // 请求头
  header: {
    'Content-Type': 'application/json',
    "Authorization": AppStorage.get(TOKEN_KEY) as string || ''
  }
}
    • 解析响应数据
      const res = await httpRequest.request(urlStr, config)
console.log('请求url地址', urlStr)
// res.responseCode响应状态码，这里的401还会认为是请求成功
if (res.responseCode === 401) {
  // 401 token超时
  // 删除持久化数据token
  AppStorage.set<string>(TOKEN_KEY, '')
  promptAction.showToast({ message: 'token超时！' })
  // 回登录
  router.replaceUrl({
    url: 'pages/Login/LoginPage'
  })
  // 返回错误终止
  return Promise.reject(new Error('token超时！'))
} else if (res.responseCode === 404) {
  promptAction.showToast({ message: '请求地址不正确！' })
  return Promise.reject(new Error('请求地址不正确！'))
} else {
  // 指定为字符串，然后再转成一个对象，类型是不明确的要使用泛型,返回第一层+泛型,泛型的定义是一个类和之前的有所差距
  const result = JSON.parse(res.result as string) as ResponsesData<T>
  // 再判断返回的状态码进行处理，不是200都是失败
  if (result.code === 200) {
    return result.data as T
  } else {
    promptAction.showToast({ message: '服务器异常！' })
    return Promise.reject(new Error(result.msg))
  }
}

  • 方案二：使用三方库 Axios。

    • 定义请求头
      const instance = axios.create({
  baseURL: 'https://www.xxx.com/info',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
    • 解析响应数据
      axios.get<userInfo, AxiosResponse<userInfo>, null>('/user', {
  params: {
    ID: 12345
  }
})
.then((response:AxiosResponse<userInfo>) => {
  console.info("id" + response.data.id)
})

【总结】

Axios的底层实现是基于HarmonyOS的Network Kit中的@ohos.net.http。 参考 Axios封装网络请求 可以对Axios进一步封装，使用更方便。

在HarmonyOS NEXT中，HTTP请求封装主要通过模块化的方式实现。系统提供了@ohos.net.http模块处理网络请求，开发者需在module.json5中声明网络权限（ohos.permission.INTERNET）。核心步骤：1. 创建HttpRequest对象；2. 设置请求参数（URL、方法、头信息）；3. 发起请求并处理回调。异步请求使用Promise/async语法，响应数据通过on(‘header’)和on(‘data’)事件获取。注意Next版本弃用了部分旧API，需使用http.createHttp()替代原有创建方式。错误处理需监听on(‘error’)事件。

在HarmonyOS Next中封装HTTP请求可以这样做：

  1. 自定义请求头： 使用http.createHttp()创建请求对象后，通过setHeader()方法设置请求头：
let httpRequest = http.createHttp();
httpRequest.setHeader("Content-Type", "application/json");
httpRequest.setHeader("Authorization", "Bearer token");
  1. 支持GET/POST请求： 封装一个通用请求方法：
async function request(url: string, method: "GET"|"POST", data?: object) {
  let httpRequest = http.createHttp();
  let options = {
    method: method,
    header: { 'Content-Type': 'application/json' }
  };
  
  if (method === "POST" && data) {
    options['extraData'] = JSON.stringify(data);
  }

  return httpRequest.request(url, options);
}
  1. JSON数据转换： 使用泛型进行类型安全的转换：
interface ResponseData<T> {
  code: number;
  data: T;
}

async function getData<T>(url: string): Promise<T> {
  const response = await request(url, "GET");
  const result: ResponseData<T> = JSON.parse(response.result);
  return result.data;
}

// 使用示例
interface User {
  id: number;
  name: string;
}

const userList = await getData<User[]>("/api/users");

完整封装示例：

class HttpService {
  private httpRequest = http.createHttp();

  async request<T>(url: string, method: "GET"|"POST", data?: object): Promise<T> {
    const options = {
      method,
      header: this.getHeaders()
    };

    if (method === "POST" && data) {
      options['extraData'] = JSON.stringify(data);
    }

    const response = await this.httpRequest.request(url, options);
    return JSON.parse(response.result).data;
  }

  private getHeaders() {
    return {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer token'
    };
  }
}

这种封装方式提供了类型安全的HTTP请求处理，同时支持自定义请求头和GET/POST方法。

回到顶部