"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:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"request",slug:"request",children:[]},{level:3,title:"useRequest",slug:"userequest",children:[]}]}],filePathRelative:"reference/plugin/plugins/request.md",git:{updatedTime:1664436338e3,contributors:[{name:"winixt",email:"haizekuo@gmail.com",commits:1}]}}},2434:(n,s,a)=>{a.r(s),a.d(s,{default:()=>f});var p=a(6252);const e=(0,p.uE)('

@fesjs/plugin-request

基于 axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能。

启用方式

在 package.json 中引入依赖：

{\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-request": "^2.0.0"\n    }\n}\n

1
2
3
4
5
6

配置

构建时配置

export default {\n    request: {\n        dataField: 'result'\n    }\n};\n

1
2
3
4
5

dataField

类型： string
默认值： ''
详情：
dataField 对应接口统一格式中的数据字段，比如接口如果统一的规范是 { success: boolean, result: any} ，那么就不需要配置，这样你通过 useRequest 消费的时候会生成一个默认的 formatResult，直接返回 result 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 dataField。配置为 ''（空字符串）的时候不做处理。

base(即将废弃)

类型： string
默认值： ''
详情：
base 接口前缀。

',12),t={class:"custom-container warning"},o=(0,p._)("p",{class:"custom-container-title"},"即将废弃",-1),c=(0,p.Uk)("这个字段将在下个版本废弃，推荐使用 "),l={href:"https://github.com/axios/axios",target:"_blank",rel:"noopener noreferrer"},r=(0,p.Uk)("axios baseURL"),u=(0,p.Uk)("。"),i=(0,p.uE)('

运行时配置

在 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

skipErrorHandler

类型： 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

1
2
3
4
5
6
7
8
9
10
11
12

使用

发起一个普通 post 请求

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

1
2
3
4
5
6
7
8
9
10
11
12

merge 重复请求

连续发送多个请求，会被合并成一个请求，不会报 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

请求节流(即将废弃)

即将废弃

因为 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

若 cache 传 true，则默认使用 ram 缓存类型，缓存时间 3min。

结合 use 使用

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

配置拦截器

',21),k=(0,p.Uk)("函数的参数格式："),b={href:"http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8",target:"_blank",rel:"noopener noreferrer"},d=(0,p.Uk)("传送门"),m=(0,p.Uk)(";"),h=(0,p.uE)('

export const request = {\n    requestInterceptors: [\n        function (config) {\n            // 在发送请求之前做些什么\n            return config;\n        },\n        [\n            function (config) {\n                // 在发送请求之前做些什么\n                return config;\n            },\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            },\n            function (error) {\n                // 对响应错误做点什么\n                return Promise.reject(error);\n            }\n        ]\n    ]\n};\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

API

request

类型：函数
详情：请求后端接口
参数：
- url: 后端接口 url
- data: 参数
- options: \b 配置（支持 axios 所有配置）
返回值: Promise

useRequest

request 的封装，返回响应式 loading、error、 data

',6),g={},f=(0,a(3744).Z)(g,[["render",function(n,s){const a=(0,p.up)("OutboundLink");return(0,p.wg)(),(0,p.iD)(p.HY,null,[e,(0,p._)("div",t,[o,(0,p._)("p",null,[c,(0,p._)("a",l,[r,(0,p.Wm)(a)]),u])]),i,(0,p._)("p",null,[k,(0,p._)("a",b,[d,(0,p.Wm)(a)]),m]),h],64)}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]);

# @fesjs/plugin-request

# 启用方式

# 配置

# 构建时配置

# dataField

# base(即将废弃)

# 运行时配置

# skipErrorHandler

# 使用

# 发起一个普通 post 请求

# merge 重复请求

# 请求节流(即将废弃)

# 请求缓存

# 结合 use 使用

# 配置拦截器

# API

# request

# useRequest