网络请求 Network

Network API 提供 HTTP 请求能力，支持拦截器机制和快捷方法。

在线试用

GET

POST

PUT

DELETE

自定义 woo.request

发送

网络 API 试用

通过 jsonplaceholder 发起真实 HTTP 请求；可自定义 URL、方法和 JSON 体，结果展示在下方

导入

import woo from 'mini-sdk'
// 或
import { network } from 'mini-sdk'

request

发起 HTTP 请求。

woo.request<T>(options: RequestOptions<T>): Promise<RequestResult<T>>

参数：

字段	类型	必填	默认值	说明
`url`	`string`	是	—	请求 URL
`method`	`HttpMethod`	否	`"GET"`	请求方法
`data`	`unknown`	否	—	请求体
`header`	`Record<string, string>`	否	`{}`	请求头
`timeout`	`number`	否	10000	超时时间（ms）

返回值：

interface RequestResult<T = unknown> {
  data: T          // 响应数据
  statusCode: number // HTTP 状态码
  header: Record<string, string> // 响应头
}

基础用法

const res = await woo.request({
  url: 'https://api.example.com/users',
  method: 'GET',
  header: {
    'Authorization': 'Bearer xxx',
  },
})

console.log(res.data)       // 响应数据
console.log(res.statusCode) // 200

带泛型的类型安全调用

interface User {
  id: number
  name: string
  email: string
}

const res = await woo.request<User[]>({
  url: 'https://api.example.com/users',
})

// res.data 类型为 User[]
res.data.forEach(user => {
  console.log(user.name)
})

快捷方法

// GET
const res = await woo.request.get<User[]>('/api/users')

// POST
const res = await woo.request.post<User>('/api/users', {
  name: 'Alice',
  email: 'alice@example.com',
})

// PUT
const res = await woo.request.put<User>('/api/users/1', {
  name: 'Alice Updated',
})

// DELETE
const res = await woo.request.del('/api/users/1')

快捷方法签名

request.get<T>(url, options?)
request.post<T>(url, data?, options?)
request.put<T>(url, data?, options?)
request.del<T>(url, options?)

拦截器

类似 Axios 的拦截器机制，可在请求发出前和响应返回后进行拦截处理。

请求拦截器

// 添加请求拦截器
const id = woo.request.interceptors.request.use(
  (config) => {
    // 在请求发出前添加 Token
    config.header = {
      ...config.header,
      'Authorization': `Bearer ${getToken()}`,
    }
    return config
  },
  (error) => {
    // 请求错误处理
    return Promise.reject(error)
  }
)

// 移除拦截器
woo.request.interceptors.request.eject(id)

响应拦截器

woo.request.interceptors.response.use(
  (response) => {
    // 统一处理响应
    if (response.statusCode === 401) {
      // Token 过期，跳转登录
      woo.reLaunch('/pages/login/index')
    }
    return response
  },
  (error) => {
    woo.showToast({ title: '网络请求失败', icon: 'none' })
    return Promise.reject(error)
  }
)

拦截器执行顺序

请求拦截器 1 → 请求拦截器 2 → 发送请求 → 响应拦截器 1 → 响应拦截器 2

完整示例：封装请求工具

VueReact

vue

<script setup>
import { ref, onMounted } from 'vue'
import woo from 'mini-sdk'

// 添加 Token 拦截器
woo.request.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) {
    config.header = { ...config.header, Authorization: `Bearer ${token}` }
  }
  return config
})

const users = ref([])

onMounted(async () => {
  const res = await woo.request.get('/api/users')
  users.value = res.data.list
})
</script>

<template>
  <ul>
    <li v-for="u in users" :key="u.id">{{ u.name }}</li>
  </ul>
</template>

tsx

import { useState, useEffect } from 'react'
import woo from 'mini-sdk'

// 添加 Token 拦截器
woo.request.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) {
    config.header = { ...config.header, Authorization: `Bearer ${token}` }
  }
  return config
})

function UserList() {
  const [users, setUsers] = useState([])

  useEffect(() => {
    woo.request.get('/api/users').then((res) => {
      setUsers(res.data.list)
    })
  }, [])

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  )
}

类型定义

interface RequestOptions<T = unknown> {
  url: string
  method?: HttpMethod
  data?: unknown
  header?: Record<string, string>
  timeout?: number
  success?: (res: RequestResult<T>) => void
  fail?: (err: BridgeError) => void
  complete?: () => void
}

interface RequestResult<T = unknown> {
  data: T
  statusCode: number
  header: Record<string, string>
}

interface RequestConfig {
  url: string
  method?: HttpMethod
  data?: unknown
  header?: Record<string, string>
  timeout?: number
}

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'OPTIONS' | 'PATCH'

API 速查表

方法	说明	签名
`request`	发起 HTTP 请求	`(RequestOptions) → RequestTask`
`uploadFile`	上传文件	`(UploadOptions) → UploadTask`
`downloadFile`	下载文件	`(DownloadOptions) → DownloadTask`
`addInterceptor`	添加请求/响应拦截器	`(Interceptor) → void`
`removeInterceptor`	移除指定拦截器	`(id: string) → void`

网络请求 Network ​

在线试用 ​

导入 ​

request ​

基础用法 ​

带泛型的类型安全调用 ​

快捷方法 ​

拦截器 ​

请求拦截器 ​

响应拦截器 ​

拦截器执行顺序 ​

完整示例：封装请求工具 ​

类型定义 ​

API 速查表 ​