Network

The Network API provides HTTP requests, interceptors, and convenience methods.

Try it online

GETPOSTPUTDELETE

Custom `woo.request`

GETPOSTPUTDELETESend

{"title":"foo","body":"bar","userId":1}

Network API demo

Makes real HTTP calls via jsonplaceholder; you can set URL, method, and JSON body. Results appear below.

Vue

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

const data = ref(null)

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

<template>
  <button @click="fetchUser">获取用户</button>
  <pre v-if="data">{{ data }}</pre>
</template>

React

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

function UserPage() {
  const [data, setData] = useState(null)

  async function fetchUser() {
    const res = await woo.request.get('/api/users/1')
    setData(res.data)
  }

  return (
    <>
      <button onClick={fetchUser}>获取用户</button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </>
  )
}

Import

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

request

Sends an HTTP request.

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

Parameters:

Field	Type	Required	Default	Description
url	string	Yes	—	Request URL
method	HttpMethod	No	"GET"	HTTP method
data	unknown	No	—	Request body
header	Record<string, string>	No	{}	Request headers
timeout	number	No	10000	Timeout (ms)

Return value:

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

Basic usage

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

Typed call with a generic

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)
})

Convenience methods

// 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')

Method signatures

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

Interceptors

An Axios-style interceptor model: you can run logic before a request is sent and after a response is received.

Request interceptor

// 添加请求拦截器
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)

Response interceptor

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)
  }
)

Order of execution

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

End-to-end example: request utility

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>

React

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>
  )
}

Type definitions

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 quick reference

Method	Description	Signature
request	Send an HTTP request	(RequestOptions) → RequestTask
uploadFile	Upload a file	(UploadOptions) → UploadTask
downloadFile	Download a file	(DownloadOptions) → DownloadTask
addInterceptor	Add a request/response interceptor	(Interceptor) → void
removeInterceptor	Remove an interceptor by id	(id: string) → void