"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[919],{2121:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-41dee210",path:"/reference/plugin/plugins/request.html",title:"@fesjs/plugin-request",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"配置",slug:"配置",children:[{level:3,title:"构建时配置",slug:"构建时配置",children:[]},{level:3,title:"运行时配置",slug:"运行时配置",children:[]}]},{level:2,title:"使用",slug:"使用",children:[{level:3,title:"发起一个普通 post 请求",slug:"发起一个普通-post-请求",children:[]},{level:3,title:"merge 重复请求",slug:"merge-重复请求",children:[]},{level:3,title:"请求节流(即将废弃)",slug:"请求节流-即将废弃",children:[]},{level:3,title:"请求缓存",slug:"请求缓存",children:[]},{level:3,title:"结合 use 使用",slug:"结合-use-使用",children:[]},{level:3,title:"配置拦截器",slug:"配置拦截器",children:[]}]}],filePathRelative:"reference/plugin/plugins/request.md",git:{updatedTime:1664185607e3,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},8648:(n,s,a)=>{a.r(s),a.d(s,{default:()=>f});var p=a(6252);const e=(0,p.uE)('
基于 axios 封装的 request,内置防止重复请求、请求节流、错误处理等功能。
在 package.json
中引入依赖:
{\n "dependencies": {\n "@fesjs/fes": "^2.0.0",\n "@fesjs/plugin-request": "^2.0.0"\n }\n}\n
export default {\n request: {\n dataField: 'result'\n }\n};\n
类型: string
默认值: ''
详情:
dataField
对应接口统一格式中的数据字段,比如接口如果统一的规范是 { success: boolean, result: any}
,那么就不需要配置,这样你通过 useRequest
消费的时候会生成一个默认的 formatResult
,直接返回 result
中的数据,方便使用。如果你的后端接口不符合这个规范,可以自行配置 dataField
。配置为 ''
(空字符串)的时候不做处理。
类型: string
默认值: ''
详情:
base
接口前缀。
在 app.js
中进行运行时配置。
export const request = {\n // 格式化 response.data (只有 response.data 类型为 object 才会调用)\n responseDataAdaptor: (data) => {\n data.code = data.code === '200' ? '0' : data.code;\n return data;\n },\n // 关闭 response data 校验(只判断 xhr status)\n closeResDataCheck: false,\n // 请求拦截器 http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8\n requestInterceptors: [],\n // 响应拦截器\n responseInterceptors: [],\n // 错误处理\n // 内部以 reponse.data.code === '0' 判断请求是否成功\n // 若使用其他字段判断,可以使用 responseDataAdaptor 对响应数据进行格式\n errorHandler: {\n 11199(response) {\n // 特殊 code 处理逻辑\n },\n 404(error) {},\n default(error) {\n // 异常统一处理\n }\n },\n // 其他 axios 配置\n ...otherConfigs\n};\n
类型: boolean | string | number | array<string | number>
默认值: ``
详情:
指定当前请求的某些错误状态不走 errorHandler
,单独进行处理。如果设置为 true
,当前请求的错误处理都不走 errorHandler
。
示列:
import { request } from '@fesjs/fes';\n\nrequest('/api/login', null, {\n skipErrorHandler: '110'\n})\n .then((res) => {\n // do something\n })\n .catch((err) => {\n // \b这里处理 code 为 110 的异常\n // 此时 errorHandler[110] 函数不会生效,也不会执行 errorHandler.default\n });\n
import { request } from '@fesjs/fes';\n\nrequest('/api/login', {\n username: 'robby',\n password: '123456'\n})\n .then((res) => {\n // do something\n })\n .catch((err) => {\n // 处理异常\n });\n
连续发送多个请求,会被合并成一个请求,不会报 REPEAT
接口错误。
当发生 REPEAT
请求异常,并且确保自身代码合理的情况下,可以使用该配置。
import { request } from '@fesjs/fes';\n\nrequest(\n '/api/login',\n {\n username: 'robby',\n password: '123456'\n },\n {\n mergeRequest: true // 在一个请求没有回来前,重复发送的请求会合并成一个请求\n }\n)\n .then((res) => {\n // do something\n })\n .catch((err) => {\n // 处理异常\n });\n
即将废弃
因为 request 的请求总会有一个 promise 结果,要么成功,要么失败,和防抖、节流的语义不一致,防抖、节流只是函数的不执行
import { request } from '@fesjs/fes';\n\nrequest(\n '/api/login',\n {\n username: 'robby',\n password: '123456'\n },\n {\n cache: {\n cacheType: 'ram', // ram: 内存,session: sessionStorage,local:localStorage\n cacheTime: 1000 * 60 * 3 // 缓存时间:默认3min\n }\n }\n)\n .then((res) => {\n // do something\n })\n .catch((err) => {\n // 处理异常\n });\n
若 cache
传 true
,则默认使用 ram
缓存类型,缓存时间 3min。
import { useRequest } from '@fesjs/fes';\n\nexport default {\n setup() {\n const { loading, data, error } = useRequest('/api/login', {\n username: 'robby',\n password: '123456'\n });\n\n return {\n loading,\n data,\n error\n };\n }\n};\n
export const request = {\n requestInterceptors: [\n function (config) {\n // 在发送请求之前做些什么\n return config;\n },\n [\n function (config) {\n // 在发送请求之前做些什么\n return config;\n }, function (error) {\n // 对请求错误做些什么\n return Promise.reject(error);\n }\n ]\n ],\n // 响应拦截器\n responseInterceptors: [\n function (response) {\n // 对响应数据做点什么\n return response;\n },\n [\n function (response) {\n // 对响应数据做点什么\n return response;\n }, function (error) {\n // 对响应错误做点什么\n return Promise.reject(error);\n }\n ]\n ],\n}\n\n\n## API\n\n### request\n\n- **类型**:函数\n\n- **详情**:请求后端接口\n- **参数**:\n - url: 后端接口 url\n - data: 参数\n - options: \b配置( 支持 axios 所有配置)\n- **返回值**: Promise\n\n### useRequest\n\nrequest 的封装,返回响应式 `loading`、`error`、 `data`\n