React Native与鸿蒙跨平台网络请求模块开发实战

1. 项目概述

作为一名从React Native转战鸿蒙开发的工程师，我最近完成了首个跨平台网络请求模块的实战开发。这个项目让我深刻体会到在React Native和鸿蒙双平台下实现统一网络请求方案的挑战与乐趣。本文将分享从零开始构建跨平台网络请求模块的全过程，包含核心设计思路、双平台适配技巧和实战中积累的宝贵经验。

网络请求作为移动应用的基石功能，在跨平台开发中尤为关键。React Native开发者转向鸿蒙平台时，往往面临API差异、数据格式转换、错误处理机制不一致等问题。通过本次实战，我总结出一套可复用的解决方案，能够帮助开发者快速实现90%以上的网络请求场景覆盖，同时保持双平台代码的高度一致性。

2. 核心架构设计

2.1 双平台网络层差异分析

React Native使用Fetch API或第三方库（如axios）进行网络请求，而鸿蒙平台则提供了自己的http模块。两者在以下方面存在显著差异：

1. 请求配置项：

   • React Native的timeout单位是毫秒
   • 鸿蒙的connectTimeout/readTimeout单位是秒

2. 响应结构：

   • RN返回的response对象包含ok、status等属性
   • 鸿蒙的response需要通过getCode()获取状态码

3. 错误处理：

   • RN通过catch捕获网络错误
   • 鸿蒙通过AsyncTask的onFailure回调处理

2.2 统一接口设计

为解决这些差异，我设计了抽象层NetworkService，提供统一的API：

typescript复制interface NetworkService {
  get(url: string, params?: object): Promise<Response>
  post(url: string, body: object): Promise<Response> 
  put(url: string, body: object): Promise<Response>
  delete(url: string): Promise<Response>
}

2.3 适配器模式实现

为每个平台创建具体实现：

• RNNetworkService：基于fetch实现
• HarmonyNetworkService：基于@ohos.net.http实现

通过工厂方法根据平台返回对应实例：

typescript复制function createNetworkService(): NetworkService {
  if (Platform.OS === 'harmony') {
    return new HarmonyNetworkService()
  }
  return new RNNetworkService()
}

3. 关键实现细节

3.1 请求参数标准化处理

处理平台特有参数转换：

typescript复制// RN实现
private convertConfig(config: RequestConfig): RequestInit {
  return {
    method: config.method,
    headers: config.headers,
    body: JSON.stringify(config.data),
    timeout: config.timeout // 毫秒
  }
}

// 鸿蒙实现  
private convertConfig(config: RequestConfig): http.HttpRequestOptions {
  return {
    method: config.method,
    header: config.headers,
    extraData: JSON.stringify(config.data),
    connectTimeout: config.timeout / 1000 // 转为秒
  }
}

3.2 响应数据统一封装

将平台特定响应转换为统一格式：

typescript复制interface UnifiedResponse {
  ok: boolean
  status: number
  data: any
  headers: Record<string, string>
}

// RN响应处理
private unifyResponse(response: Response): Promise<UnifiedResponse> {
  return response.json().then(data => ({
    ok: response.ok,
    status: response.status,
    data,
    headers: Object.fromEntries(response.headers.entries())
  }))
}

// 鸿蒙响应处理
private unifyResponse(response: http.HttpResponse): UnifiedResponse {
  return {
    ok: response.responseCode >= 200 && response.responseCode < 300,
    status: response.responseCode,
    data: JSON.parse(response.result),
    headers: response.header
  }
}

3.3 错误处理机制

实现跨平台的错误分类：

typescript复制enum NetworkErrorType {
  TIMEOUT = 'timeout',
  NETWORK = 'network',
  SERVER = 'server',
  CLIENT = 'client'
}

class NetworkError extends Error {
  constructor(
    public type: NetworkErrorType,
    message: string,
    public status?: number
  ) {
    super(message)
  }
}

// 使用示例
try {
  await networkService.get('https://api.example.com/data')
} catch (error) {
  if (error.type === NetworkErrorType.TIMEOUT) {
    // 处理超时
  }
}

4. 进阶功能实现

4.1 请求拦截器设计

实现类似axios的拦截器机制：

typescript复制type Interceptor = {
  request?: (config: RequestConfig) => RequestConfig
  response?: (response: UnifiedResponse) => UnifiedResponse
  error?: (error: NetworkError) => Promise<never>
}

class NetworkService {
  private interceptors: Interceptor[] = []

  addInterceptor(interceptor: Interceptor) {
    this.interceptors.push(interceptor)
  }

  private async processRequest(config: RequestConfig) {
    let currentConfig = config
    for (const interceptor of this.interceptors) {
      if (interceptor.request) {
        currentConfig = interceptor.request(currentConfig)
      }
    }
    return currentConfig
  }
}

4.2 文件上传实现

处理多平台文件上传差异：

typescript复制// RN实现
async uploadFile(url: string, fileUri: string, formData: Record<string, any>) {
  const data = new FormData()
  data.append('file', {
    uri: fileUri,
    type: 'image/jpeg',
    name: 'photo.jpg'
  })
  // 添加其他表单字段
  Object.entries(formData).forEach(([key, value]) => {
    data.append(key, value)
  })
  
  return this.post(url, data)
}

// 鸿蒙实现
async uploadFile(url: string, fileUri: string, formData: Record<string, any>) {
  const file = await fs.open(fileUri)
  const fileStat = await fs.stat(fileUri)
  const fileData = await fs.read(file.fd, {
    length: fileStat.size
  })
  
  const request = new http.HttpRequest()
  request.setExtraData(JSON.stringify(formData))
  request.setHeader('Content-Type', 'multipart/form-data')
  request.attach('file', fileData.buffer, 'photo.jpg')
  
  return this.request(url, request)
}

4.3 缓存策略集成

实现内存+持久化双层缓存：

typescript复制interface CacheStrategy {
  get(key: string): Promise<any | null>
  set(key: string, value: any, ttl: number): Promise<void>
}

class MemoryCache implements CacheStrategy {
  private store = new Map<string, { value: any; expires: number }>()

  async get(key: string) {
    const entry = this.store.get(key)
    if (!entry || entry.expires < Date.now()) {
      this.store.delete(key)
      return null
    }
    return entry.value
  }

  async set(key: string, value: any, ttl: number) {
    this.store.set(key, {
      value,
      expires: Date.now() + ttl
    })
  }
}

// 使用示例
async function getWithCache(url: string) {
  const cacheKey = `req:${url}`
  const cached = await cache.get(cacheKey)
  if (cached) return cached
  
  const data = await networkService.get(url)
  await cache.set(cacheKey, data, 60 * 1000) // 缓存1分钟
  return data
}

5. 性能优化实践

5.1 请求合并与批处理

对于高频但小数据量的请求进行合并：

typescript复制class BatchRequest {
  private queue: Array<{
    request: () => Promise<any>
    resolve: (value: any) => void
    reject: (reason?: any) => void
  }> = []
  private timer: any = null

  add<T>(request: () => Promise<T>): Promise<T> {
    return new Promise((resolve, reject) => {
      this.queue.push({ request, resolve, reject })
      this.schedule()
    })
  }

  private schedule() {
    if (this.timer) return
    
    this.timer = setTimeout(async () => {
      const currentQueue = [...this.queue]
      this.queue = []
      this.timer = null
      
      try {
        const results = await Promise.all(
          currentQueue.map(item => item.request())
        )
        currentQueue.forEach((item, index) => {
          item.resolve(results[index])
        })
      } catch (error) {
        currentQueue.forEach(item => {
          item.reject(error)
        })
      }
    }, 50) // 50ms批处理窗口
  }
}

5.2 连接复用优化

鸿蒙平台下优化HTTP连接管理：

typescript复制class HttpConnectionPool {
  private static instance: http.HttpProxy
  private static refCount = 0

  static getInstance() {
    if (!this.instance) {
      this.instance = new http.HttpProxy()
    }
    this.refCount++
    return this.instance
  }

  static release() {
    this.refCount--
    if (this.refCount <= 0 && this.instance) {
      this.instance.destroy()
      this.instance = null
    }
  }
}

// 使用示例
async function makeRequest() {
  const httpProxy = HttpConnectionPool.getInstance()
  try {
    // 使用httpProxy发起请求
  } finally {
    HttpConnectionPool.release()
  }
}

6. 测试与调试技巧

6.1 双平台Mock方案

使用MSW实现跨平台API Mock：

typescript复制// 共享的mock定义
const handlers = [
  rest.get('https://api.example.com/users', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([{ id: 1, name: 'John' }])
    )
  })
]

// RN端设置
if (process.env.NODE_ENV === 'development') {
  const { setupWorker } = require('msw')
  const worker = setupWorker(...handlers)
  worker.start()
}

// 鸿蒙端设置
if (process.env.NODE_ENV === 'development') {
  const { setupServer } = require('msw/node')
  const server = setupServer(...handlers)
  server.listen()
}

6.2 网络状况模拟

React Native调试网络状况：

bash复制# Android模拟低速网络
adb shell settings put global http_proxy 127.0.0.1:8080
adb shell settings put global global_http_proxy_host 127.0.0.1
adb shell settings put global global_http_proxy_port 8080
adb shell settings put global throttler_enabled true
adb shell settings put global throttler_value 500 # 500kbps

鸿蒙调试网络状况：

typescript复制import network from '@ohos.net.connection'

// 获取当前网络状态
network.getDefaultNet().then(netHandle => {
  netHandle.getConnectionProperties().then(properties => {
    console.log('Network type:', properties.networkType)
    console.log('Link speed:', properties.linkSpeed)
  })
})

// 模拟弱网环境（需要真机调试）
network.createNetConnection().then(conn => {
  conn.on('netAvailable', data => {
    conn.setNetworkPreference(network.NET_PREFERENCE_LOW_BANDWIDTH)
  })
})

7. 实际应用案例

7.1 用户登录模块实现

完整登录流程示例：

typescript复制class AuthService {
  private token: string | null = null

  async login(username: string, password: string) {
    try {
      const response = await networkService.post('/auth/login', {
        username,
        password
      })
      
      if (!response.ok) {
        throw new NetworkError(
          response.status >= 500 
            ? NetworkErrorType.SERVER 
            : NetworkErrorType.CLIENT,
          'Login failed',
          response.status
        )
      }
      
      this.token = response.data.token
      await secureStorage.setItem('auth_token', this.token)
      return true
    } catch (error) {
      if (error.type === NetworkErrorType.TIMEOUT) {
        // 显示重试提示
      }
      throw error
    }
  }

  async getProfile() {
    if (!this.token) {
      this.token = await secureStorage.getItem('auth_token')
      if (!this.token) return null
    }
    
    const response = await networkService.get('/auth/profile', {
      headers: {
        Authorization: `Bearer ${this.token}`
      }
    })
    
    return response.data
  }
}

7.2 分页列表数据加载

实现带缓存的分页加载：

typescript复制class PaginatedLoader<T> {
  private currentPage = 1
  private hasMore = true
  private loading = false
  private items: T[] = []

  constructor(
    private endpoint: string,
    private pageSize = 20
  ) {}

  async loadNext(): Promise<T[]> {
    if (this.loading || !this.hasMore) return this.items
    
    this.loading = true
    try {
      const response = await networkService.get(this.endpoint, {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      })
      
      const newItems = response.data.items
      this.items = [...this.items, ...newItems]
      this.hasMore = newItems.length >= this.pageSize
      this.currentPage++
      
      return this.items
    } finally {
      this.loading = false
    }
  }

  refresh() {
    this.currentPage = 1
    this.hasMore = true
    this.items = []
    return this.loadNext()
  }
}

8. 工程化实践

8.1 类型安全增强

使用TypeScript实现端到端类型安全：

typescript复制type ApiResponse<T> = {
  code: number
  message: string
  data: T
  timestamp: number
}

type User = {
  id: number
  name: string
  email: string
}

async function getUser(id: number): Promise<ApiResponse<User>> {
  const response = await networkService.get(`/users/${id}`)
  return response.data
}

// 使用示例
const result = await getUser(123)
if (result.code === 200) {
  console.log(result.data.name) // 类型推断为string
}

8.2 环境配置管理

多环境配置解决方案：

typescript复制interface EnvConfig {
  apiBaseUrl: string
  analyticsKey?: string
  featureFlags: Record<string, boolean>
}

const envs: Record<string, EnvConfig> = {
  development: {
    apiBaseUrl: 'http://localhost:3000',
    featureFlags: {
      newLogin: true
    }
  },
  production: {
    apiBaseUrl: 'https://api.example.com',
    analyticsKey: 'prod-key-123',
    featureFlags: {
      newLogin: false
    }
  }
}

function getConfig(): EnvConfig {
  return envs[process.env.NODE_ENV || 'development']
}

// 使用示例
networkService.setBaseUrl(getConfig().apiBaseUrl)

9. 性能监控与优化

9.1 请求耗时统计

实现请求性能监控：

typescript复制networkService.addInterceptor({
  request: config => {
    config.metadata = {
      startTime: Date.now()
    }
    return config
  },
  response: response => {
    const duration = Date.now() - response.config.metadata.startTime
    trackApiTiming(response.config.url, duration, response.status)
    return response
  },
  error: error => {
    const duration = Date.now() - error.config.metadata.startTime
    trackApiError(error.config.url, duration, error.type)
    return Promise.reject(error)
  }
})

9.2 关键性能指标

定义和收集关键指标：

typescript复制interface NetworkMetrics {
  requestCount: number
  successRate: number
  avgResponseTime: number
  slowRequests: Array<{
    url: string
    duration: number
  }>
}

class PerformanceMonitor {
  private static instance: PerformanceMonitor
  private data: Record<string, {
    success: number
    failure: number
    totalTime: number
    count: number
  }> = {}

  static getInstance() {
    if (!this.instance) {
      this.instance = new PerformanceMonitor()
    }
    return this.instance
  }

  recordRequest(url: string, duration: number, success: boolean) {
    if (!this.data[url]) {
      this.data[url] = { success: 0, failure: 0, totalTime: 0, count: 0 }
    }
    
    const entry = this.data[url]
    entry.count++
    entry.totalTime += duration
    if (success) {
      entry.success++
    } else {
      entry.failure++
    }
  }

  getMetrics(): NetworkMetrics {
    const urls = Object.keys(this.data)
    const totalRequests = urls.reduce((sum, url) => sum + this.data[url].count, 0)
    const successRequests = urls.reduce((sum, url) => sum + this.data[url].success, 0)
    const totalTime = urls.reduce((sum, url) => sum + this.data[url].totalTime, 0)
    
    const slowRequests = urls
      .map(url => ({
        url,
        duration: this.data[url].totalTime / this.data[url].count
      }))
      .sort((a, b) => b.duration - a.duration)
      .slice(0, 5)
    
    return {
      requestCount: totalRequests,
      successRate: successRequests / totalRequests,
      avgResponseTime: totalTime / totalRequests,
      slowRequests
    }
  }
}

10. 安全最佳实践

10.1 HTTPS证书校验

增强鸿蒙平台的证书校验：

typescript复制// 鸿蒙端自定义证书校验
class CustomSSLVerifier implements http.SSLVerifier {
  constructor(private trustedCerts: string[]) {}

  onVerify(hostname: string, certChain: string[]): boolean {
    return this.trustedCerts.some(trustedCert => 
      certChain.includes(trustedCert)
    )
  }
}

// 使用示例
const networkConfig = {
  sslVerifier: new CustomSSLVerifier([
    '-----BEGIN CERTIFICATE-----\n...'
  ])
}

const httpProxy = new http.HttpProxy(networkConfig)

10.2 敏感数据保护

安全存储认证信息：

typescript复制import { encode, decode } from 'base-64'
import { pbkdf2Sync, randomBytes } from 'crypto'

class SecureStorage {
  private encryptionKey: string

  constructor(key: string) {
    this.encryptionKey = key
  }

  private encrypt(data: string): string {
    const salt = randomBytes(16)
    const key = pbkdf2Sync(this.encryptionKey, salt, 1000, 32, 'sha256')
    const iv = randomBytes(16)
    const cipher = createCipheriv('aes-256-cbc', key, iv)
    let encrypted = cipher.update(data, 'utf8', 'base64')
    encrypted += cipher.final('base64')
    return `${encode(salt.toString('base64'))}:${encode(iv.toString('base64'))}:${encrypted}`
  }

  private decrypt(encrypted: string): string {
    const [saltEncoded, ivEncoded, data] = encrypted.split(':')
    const salt = Buffer.from(decode(saltEncoded), 'base64')
    const iv = Buffer.from(decode(ivEncoded), 'base64')
    const key = pbkdf2Sync(this.encryptionKey, salt, 1000, 32, 'sha256')
    const decipher = createDecipheriv('aes-256-cbc', key, iv)
    let decrypted = decipher.update(data, 'base64', 'utf8')
    decrypted += decipher.final('utf8')
    return decrypted
  }

  async setItem(key: string, value: string) {
    const encrypted = this.encrypt(value)
    await AsyncStorage.setItem(key, encrypted)
  }

  async getItem(key: string): Promise<string | null> {
    const encrypted = await AsyncStorage.getItem(key)
    return encrypted ? this.decrypt(encrypted) : null
  }
}

11. 调试与问题排查

11.1 常见问题速查表

11.2 网络日志记录

实现请求/响应日志拦截器：

typescript复制networkService.addInterceptor({
  request: config => {
    console.log('[Request]', config.method?.toUpperCase(), config.url)
    console.log('Headers:', config.headers)
    if (config.data) {
      console.log('Body:', config.data)
    }
    return config
  },
  response: response => {
    console.log('[Response]', response.status, response.config.url)
    console.log('Data:', response.data)
    return response
  },
  error: error => {
    console.error('[Error]', error.type, error.config.url)
    console.error('Message:', error.message)
    return Promise.reject(error)
  }
})

12. 项目构建与部署

12.1 多环境构建配置

配置不同环境的构建参数：

json复制// package.json
{
  "scripts": {
    "build:dev": "ENV=development react-native bundle",
    "build:prod": "ENV=production react-native bundle",
    "build:harmony": "ENV=production hvigor clean assemble"
  }
}

12.2 鸿蒙平台打包优化

配置HTTP模块的打包选项：

json复制// entry/src/main/resources/config.json
{
  "module": {
    "abilities": [
      {
        "name": ".MainAbility",
        "type": "page",
        "configChanges": [
          "locale",
          "layout",
          "fontSize",
          "orientation"
        ],
        "metaData": {
          "customizeData": [
            {
              "name": "hwc-theme",
              "value": "androidhwext:style/Theme.Emui.NoTitleBar"
            }
          ]
        }
      }
    ],
    "reqPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      }
    ]
  }
}

13. 持续集成方案

13.1 自动化测试配置

配置网络测试套件：

yaml复制# .github/workflows/test.yml
name: Network Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        platform: [android, harmony]
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: |
          if [ "${{ matrix.platform }}" = "harmony" ]; then
            npm run test:harmony
          else
            npm run test:android
          fi
      - name: Upload coverage
        uses: codecov/codecov-action@v1

13.2 端到端测试案例

编写网络测试用例：

typescript复制describe('NetworkService', () => {
  let networkService: NetworkService

  beforeAll(() => {
    networkService = createNetworkService()
  })

  test('should handle successful GET request', async () => {
    const response = await networkService.get(
      'https://jsonplaceholder.typicode.com/todos/1'
    )
    expect(response.status).toBe(200)
    expect(response.data).toHaveProperty('id')
  })

  test('should handle request timeout', async () => {
    await expect(
      networkService.get('https://httpstat.us/200?sleep=5000', {
        timeout: 1000
      })
    ).rejects.toThrow(NetworkError)
  }, 10000)
})

14. 项目演进方向

14.1 WebSocket集成

实现跨平台WebSocket通信：

typescript复制interface WebSocketService {
  connect(url: string): void
  send(data: any): void
  close(): void
  on(event: 'message', listener: (data: any) => void): void
  on(event: 'error', listener: (error: Error) => void): void
}

// RN实现
class RNWebSocket implements WebSocketService {
  private socket: WebSocket | null = null

  connect(url: string) {
    this.socket = new WebSocket(url)
    this.socket.onmessage = (event) => {
      this.emit('message', JSON.parse(event.data))
    }
  }
}

// 鸿蒙实现
class HarmonyWebSocket implements WebSocketService {
  private socket: webSocket.WebSocket | null = null

  connect(url: string) {
    this.socket = new webSocket.WebSocket()
    this.socket.on('message', (data: string) => {
      this.emit('message', JSON.parse(data))
    })
    this.socket.connect(url)
  }
}

14.2 离线优先策略

实现离线缓存与同步：

typescript复制class OfflineManager {
  private queue: Array<{
    request: () => Promise<any>
    resolve: (value: any) => void
    reject: (reason?: any) => void
  }> = []
  private isOnline = true

  constructor() {
    network.addListener('networkStatusChange', (status) => {
      this.isOnline = status.isConnected
      if (this.isOnline) {
        this.processQueue()
      }
    })
  }

  async execute<T>(request: () => Promise<T>): Promise<T> {
    if (!this.isOnline) {
      return new Promise((resolve, reject) => {
        this.queue.push({ request, resolve, reject })
      })
    }
    return request()
  }

  private async processQueue() {
    while (this.queue.length > 0 && this.isOnline) {
      const item = this.queue.shift()!
      try {
        const result = await item.request()
        item.resolve(result)
      } catch (error) {
        item.reject(error)
      }
    }
  }
}

15. 性能对比数据

15.1 双平台基准测试

测试环境：

• 设备：华为P40 Pro
• 网络：Wi-Fi 5GHz
• 测试用例：连续100次GET请求

15.2 优化前后对比

缓存策略实施前后的性能变化：

16. 经验总结与建议

在实际开发中，有几点关键经验值得分享：

1. 平台差异处理：

   • 尽早建立平台检测机制，避免运行时错误
   • 将平台特定代码集中管理，便于维护

2. 网络状态管理：

   • 实现全局网络状态监听
   • 重要操作添加重试机制

3. 错误处理：

   • 统一错误分类体系
   • 提供用户友好的错误信息

4. 性能优化：

   • 合理设置请求超时时间
   • 实现请求优先级调度

5. 调试技巧：

   • 开发阶段启用详细日志
   • 使用Charles等工具抓包分析

一个特别实用的技巧是创建网络调试面板，在开发环境中实时显示：

• 当前网络状态
• 最近请求的耗时统计
• 失败请求的详细信息
• 手动触发重试的按钮

这可以极大提升网络相关问题的排查效率。