玩转HarmonyOS NEXT网络请求：从新手到高手的实战秘籍-CSDN博客

本文链接：https://blog.csdn.net/xingfei_work/article/details/147915373

Feri一到，编程开窍，嗨，我是Feri!

🚀 玩转HarmonyOS网络请求：从新手到高手的实战秘籍

一、为什么需要网络请求？——程序员的"外卖哲学"

想象你在开发一个新闻App，用户点击屏幕时，你需要从服务器"端"来最新的新闻。这就像点外卖：

URL 是餐馆的地址（比如 https://www.juhe.cn/news/api）
请求方法 是你的点餐方式：
GET 像问老板"给我来份宫保鸡丁"（获取数据）
POST 像提交订单（发送数据给服务器）
请求参数 是你的特殊要求：比如"微辣+少饭"（type=tech&page=1）
响应结果 就是外卖小哥送来的餐盒（可能是JSON格式的新闻数据）

理解了这个类比，我们就可以开始动手啦！

二、HTTP基础：程序员的"网络会话"规则

1. 八种请求方法：你该怎么"说话"？

方法	作用	类比场景
`GET`	获取资源（只读）	查看菜单
`POST`	创建资源（新增数据）	提交订单
`PUT`	更新资源（修改数据）	修改订单（比如换饮料）
`DELETE`	删除资源	取消订单
`HEAD`	仅获取响应头（不拿正文）	问老板"这道菜辣吗？"
`OPTIONS`	查看接口支持的方法	问服务员"你们支持刷卡吗？"

💡 开发中最常用的是 GET 和 POST，但掌握全家族能让你应对复杂场景！

2. JSON：程序员的"通用语言"

JSON长得像这样：

{
  "news": [
    {
      "title": "HarmonyOS网络请求实战",
      "author": "Feri",
      "tags": ["编程", "HarmonyOS", "网络开发"]
    }
  ]
}

对象 {}：像一个抽屉，装着"属性名: 值"的小格子
数组 []：像一个盒子，装着多个对象或值
跨语言通用：不管你用Java还是JS，都能读懂这份"外星文"

三、实战第一步：发起第一个请求（以新闻API为例）

1. 准备工作：申请"网络通行证"

在 config.json 里加这行（否则请求会被拦截）：

"reqPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

2. 代码三步走（以GET请求为例）

① 引入工具包：打开"网络工具箱"

import { http } from '@kit.NetworkKit'; // 引入网络工具

② 创建请求对象：拿到"点餐菜单"

let request = http.createHttp(); // 相当于拿到一个空白订单

③ 发起请求：点击"下单"按钮

Button("获取头条新闻")
  .onClick(async () => {
    const API_KEY = "7f14068bf84db1f93377e4a98c8c8404"; // 你的API密钥（相当于订餐密码）
    const url = `http://v.juhe.cn/toutiao/index?key=${API_KEY}&type=top`; // 拼接完整地址
    
    // 发起请求，这里用了async/await让代码更像同步操作
    const response = await request.request(url, {
      method: http.RequestMethod.GET, // 告诉服务器"我要获取数据"
      header: { "Content-Type": "application/x-www-form-urlencoded" } // 请求头：告诉服务器数据格式
    });
    
    // 处理结果：相当于打开外卖包装盒
    if (response.responseCode === 200) { // 200表示"订单成功"
      const newsData = JSON.parse(response.result); // 解析JSON数据
      console.log("最新新闻：", newsData.data[0].title); // 打印第一条新闻标题
    } else {
      console.log("请求失败，错误码：", response.responseCode);
    }
    
    request.destroy(); // 吃完饭后记得收拾餐具（释放资源）
  })

四、进阶操作：封装工具类——让代码更优雅

想象每次点餐都要重复写地址、电话，是不是很麻烦？
封装工具类就像创建"常用订单模板"，下次直接用！

1. 封装HttpUtil（支持Promise和拦截器）

import { http } from '@kit.NetworkKit';

export class HttpUtil {
  // 默认配置：比如常用的超时时间、数据格式
  static DEFAULT_CONFIG = {
    timeout: 10000, // 10秒超时
    headers: { "Content-Type": "application/json" }
  };

  // 通用请求方法（支持所有请求类型）
  static async request(url: string, options: any) {
    const config = { ...this.DEFAULT_CONFIG, ...options };
    const request = http.createHttp();
    
    try {
      const res = await request.request(url, {
        method: config.method,
        header: config.headers,
        extraData: config.data, // POST请求的参数
        connectTimeout: config.timeout,
        readTimeout: config.timeout
      });
      
      if (res.responseCode >= 200 && res.responseCode < 300) {
        return JSON.parse(res.result); // 自动解析JSON
      } else {
        throw new Error(`请求失败：${res.responseCode}`);
      }
    } finally {
      request.destroy(); // 记得释放资源！
    }
  }

  // 快捷GET方法（自动拼接参数）
  static get(url: string, params?: any) {
    const query = params ? new URLSearchParams(params).toString() : "";
    return this.request(`${url}?${query}`, { method: http.RequestMethod.GET });
  }

  // 快捷POST方法
  static post(url: string, data?: any) {
    return this.request(url, { method: http.RequestMethod.POST, data });
  }
}

2. 使用工具类：一行代码发起请求

// 获取笑话（GET请求）
Button("讲个笑话")
  .onClick(async () => {
    const joke = await HttpUtil.get("http://v.juhe.cn/joke/randJoke", {
      key: "b12d46180eda262ec3a1cec558aa950e"
    });
    console.log(joke.result.joke); // 直接拿到笑话内容
  })

// 提交表单（POST请求）
Button("提交反馈")
  .onClick(async () => {
    const feedback = {
      content: "这个工具类太好用啦！",
      userId: "12345"
    };
    await HttpUtil.post("http://api.example.com/feedback", feedback);
    console.log("反馈提交成功！");
  })