第10篇：网络请求桥接：从 Flutter 发起 HTTP 请求

# Flutter × 鸿蒙实战30讲（10）：网络请求桥接：从 Flutter 发起 HTTP 请求

> 作者：烟云任平生  
> 发布时间：2025年12月10日  
> 标签：`#Flutter` `#OpenHarmony` `#网络请求` `#HTTP` `#CSDN`

---

### 一、为什么需要桥接？

虽然 Flutter Web 可直接发起 `fetch()` 请求，但在 **企业内网、HTTPS 证书校验、统一拦截** 等场景下，需由原生层统一处理网络。

此外，部分设备禁用 WebView 网络，必须走原生通道。

---

### 二、ArkTS 实现 HTTP 客户端

```ts
// networkBridge.ts
import http from '@ohos.net.http';

export class NetworkBridge {
  static async request(url: string, options: any = {}): Promise<string> {
    return new Promise((resolve, reject) => {
      const req = http.createHttp();
      req.request(
        url,
        {
          method: options.method || http.RequestMethod.GET,
          header: options.headers || {},
          extraData: options.body
        },
        (err, data) => {
          if (err) {
            reject(err);
          } else {
            resolve(data.result as string);
          }
          req.destroy();
        }
      );
    });
  }
}
三、注册到 WebView
// MainPage.ets
aboutToAppear() {
  this.controller.registerJavaScriptProxy({
    object: {
      httpGet: async (url: string) => {
        try {
          const result = await NetworkBridge.request(url);
          return result;
        } catch (e) {
          return JSON.stringify({ error: e.message });
        }
      }
    },
    name: "HttpAPI",
    interface: ["httpGet"]
  });
}
四、Flutter 侧调用
Future<String> fetchData(String url) async {
  final bridge = html.window['HttpAPI'];
  if (bridge == null) {
    // 降级：直接 fetch
    final resp = await html.window.fetch(url);
    return await resp.text();
  }

  // 走原生通道
  final result = await bridge.callMethod('httpGet', [url]);
  if (result is String) {
    final json = jsonDecode(result);
    if (json['error'] != null) throw Exception(json['error']);
    return result;
  }
  return '';
}
五、优势与适用场景
✅ 统一网络监控：可在 ArkTS 层记录日志、埋点

✅ 绕过 WebView 限制：某些设备 WebView 禁网

✅ 支持自定义证书：在 http.createHttp() 中配置 SSL


🔜 下一篇预告：《第11讲：获取设备信息：型号、OS版本、屏幕DPI》

❤️ 如果这篇帮你解决了网络兼容问题，请点赞支持！