特性

安装

npm install @winner-fed/plugin-request# 或者yarn add @winner-fed/plugin-request# 或者pnpm add @winner-fed/plugin-request

使用

1. 在.winrc.ts 中配置插件

import{defineConfig}from'win';exportdefaultdefineConfig({plugins:['@winner-fed/plugin-request'],request:{dataField:'data'// 可选，默认为 'data'，设置为 '' 则不提取数据字段}});

2. 在app.ts 中配置请求拦截器

import{RequestConfig}from'winjs';exportconstrequest:RequestConfig={timeout:10000,baseURL:'https://api.example.com',// 请求拦截器requestInterceptors:[[(config)=>{// 添加认证 tokenconfig.headers.Authorization=`Bearer${getToken()}`;returnconfig;},(error)=>{console.error('请求拦截器错误:',error);returnPromise.reject(error);}]],// 响应拦截器responseInterceptors:[[(response)=>{// 处理响应数据if(response.data.code===200){returnresponse;}thrownewError(response.data.message);},(error)=>{console.error('响应拦截器错误:',error);returnPromise.reject(error);}]],// 错误处理配置errorConfig:{errorHandler:(error,opts)=>{console.error('全局错误处理:',error);// 自定义错误处理逻辑},errorThrower:(res)=>{if(res.success===false){thrownewError(res.message||'请求失败');}}}};

3. 使用 request 方法

import{request}from'winjs';// 基本用法constdata=awaitrequest('/api/users');// 带参数的 POST 请求constresult=awaitrequest('/api/users',{method:'POST',data:{name:'John',age:30}});// 获取完整响应constresponse=awaitrequest('/api/users',{getResponse:true});// 单次请求拦截器constdata=awaitrequest('/api/users',{requestInterceptors:[(config)=>{config.headers['X-Custom-Header']='value';returnconfig;}]});

4. 使用 useRequest Hook (Vue 3)

<template>  <div>    <divv-if="loading">加载中...</div>    <divv-else-if="error">错误: {{ error.message }}</div>    <divv-else>      <h1>用户列表</h1>      <ul>        <liv-for="user in data":key="user.id">          {{ user.name }}        </li>      </ul>    </div>    <button@click="refresh">刷新</button>  </div></template><script setup>import {useRequest }from'winjs';// 基本用法const {data,loading,error,refresh }=useRequest(()=> {returnrequest('/api/users');});// 带参数的请求const { data:userData, loading:userLoading }=useRequest(  (userId)=>request(`/api/users/${userId}`),  {    manual:true,// 手动触发onSuccess: (data)=> {console.log('请求成功:', data);    },onError: (error)=> {console.error('请求失败:', error);    }  });// 触发带参数的请求constfetchUser= (id)=> {userData.run(id);};</script>

配置选项

request 配置

RequestConfig 接口

interfaceRequestConfigextendsAxiosRequestConfig{errorConfig?:{errorHandler?:(error:RequestError,opts:RequestOptions)=>void;errorThrower?:(res:any)=>void;};requestInterceptors?:RequestInterceptorTuple[];responseInterceptors?:ResponseInterceptorTuple[];}

API 文档

request(url, options?)

参数

返回值

示例

// 基本 GET 请求constusers=awaitrequest('/api/users');// POST 请求constuser=awaitrequest('/api/users',{method:'POST',data:{name:'John',email:'john@example.com'}});// 获取完整响应constresponse=awaitrequest('/api/users',{getResponse:true});

useRequest(service, options?)

参数

返回值

interfaceUseRequestResult{data:Ref<T>;loading:Ref<boolean>;error:Ref<Error|null>;run:(...args:any[])=>Promise<T>;runAsync:(...args:any[])=>Promise<T>;refresh:()=>Promise<T>;mutate:(data:T)=>void;cancel:()=>void;}

示例

const{ data, loading, error, run, refresh}=useRequest((keyword)=>request(`/api/search?q=${keyword}`),{manual:true,debounceWait:300,onSuccess:(data)=>{console.log('搜索成功:',data);}});

getRequestInstance()

返回值

示例

import{getRequestInstance}from'winjs';constaxiosInstance=getRequestInstance();// 使用 axios 实例constresponse=awaitaxiosInstance.get('/api/users');

拦截器

请求拦截器

constrequestInterceptor:RequestInterceptorTuple=[(config)=>{// 修改请求配置config.headers.Authorization=`Bearer${token}`;returnconfig;},(error)=>{// 处理请求错误returnPromise.reject(error);}];

响应拦截器

constresponseInterceptor:ResponseInterceptorTuple=[(response)=>{// 处理响应数据if(response.data.code===200){returnresponse;}thrownewError(response.data.message);},(error)=>{// 处理响应错误returnPromise.reject(error);}];

错误处理

全局错误处理

exportconstrequest:RequestConfig={errorConfig:{errorHandler:(error,opts)=>{if(error.response?.status===401){// 处理未授权错误redirectToLogin();}elseif(error.response?.status===500){// 处理服务器错误showErrorMessage('服务器错误，请稍后重试');}}}};

单个请求错误处理

try{constdata=awaitrequest('/api/users');}catch(error){if(error.response?.status===404){console.log('用户不存在');}else{console.error('请求失败:',error);}}

类型定义

importtype{RequestConfig,RequestOptions,RequestError,RequestInterceptor,ResponseInterceptor,ErrorInterceptor}from'winjs';

许可证