ネットワーク（Network）

Network API は HTTP 通信、インターセプター、短縮メソッドを提供します。

オンラインで試す

GETPOSTPUTDELETE

カスタム `woo.request`

GETPOSTPUTDELETE送信

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

Network API のデモ

jsonplaceholder へ実際の HTTP リクエストを送れます。URL・メソッド・JSON ボディを指定でき、結果は下に表示されます。

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 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"	HTTP メソッド
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

通しの例：リクエストユーティリティ

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

型定義

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