@fesjs/plugin-request
基于 axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能。
启用方式
在 package.json 中引入依赖：
{
"dependencies": {
"@fesjs/fes": "^2.0.0",
"@fesjs/plugin-request": "^2.0.0"
}
}
2
3
4
5
6
配置
构建时配置
export default {
request: {
dataField: 'result'
}
};
2
3
4
5
dataField
类型：
string默认值：
''详情：
dataField对应接口统一格式中的数据字段，比如接口如果统一的规范是{ success: boolean, result: any}，那么就不需要配置，这样你通过useRequest消费的时候会生成一个默认的formatResult，直接返回result中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置dataField。配置为''（空字符串）的时候不做处理。
base(即将废弃)
类型：
string默认值：
''详情：
base接口前缀。
即将废弃
这个字段将在下个版本废弃，推荐使用 axios baseURL在新窗口打开。
运行时配置
在 app.js 中进行运行时配置。
export const request = {
// 格式化 response.data (只有 response.data 类型为 object 才会调用)
responseDataAdaptor: (data) => {
data.code = data.code === '200' ? '0' : data.code;
return data;
},
// 关闭 response data 校验（只判断 xhr status）
closeResDataCheck: false,
// 请求拦截器 http://axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8
requestInterceptors: [],
// 响应拦截器
responseInterceptors: [],
// 错误处理
// 内部以 reponse.data.code === '0' 判断请求是否成功
// 若使用其他字段判断，可以使用 responseDataAdaptor 对响应数据进行格式
errorHandler: {
11199(response) {
// 特殊 code 处理逻辑
},
404(error) {},
default(error) {
// 异常统一处理
}
},
// 其他 axios 配置
...otherConfigs
};
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';
request('/api/login', null, {
skipErrorHandler: '110'
})
.then((res) => {
// do something
})
.catch((err) => {
// 这里处理 code 为 110 的异常
// 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default
});
2
3
4
5
6
7
8
9
10
11
12
使用
发起一个普通 post 请求
import { request } from '@fesjs/fes';
request('/api/login', {
username: 'robby',
password: '123456'
})
.then((res) => {
// do something
})
.catch((err) => {
// 处理异常
});
2
3
4
5
6
7
8
9
10
11
12
merge 重复请求
连续发送多个请求，会被合并成一个请求，不会报 REPEAT 接口错误。
当发生 REPEAT 请求异常，并且确保自身代码合理的情况下，可以使用该配置。
import { request } from '@fesjs/fes';
request(
'/api/login',
{
username: 'robby',
password: '123456'
},
{
mergeRequest: true // 在一个请求没有回来前，重复发送的请求会合并成一个请求
}
)
.then((res) => {
// do something
})
.catch((err) => {
// 处理异常
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
请求节流(即将废弃)
即将废弃
因为 request 的请求总会有一个 promise 结果，要么成功，要么失败，和防抖、节流的语义不一致，防抖、节流只是函数的不执行
请求缓存
import { request } from '@fesjs/fes';
request(
'/api/login',
{
username: 'robby',
password: '123456'
},
{
cache: {
cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage
cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min
}
}
)
.then((res) => {
// do something
})
.catch((err) => {
// 处理异常
});
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';
export default {
setup() {
const { loading, data, error } = useRequest('/api/login', {
username: 'robby',
password: '123456'
});
return {
loading,
data,
error
};
}
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
配置拦截器
函数的参数格式：传送门在新窗口打开;
export const request = {
requestInterceptors: [
function (config) {
// 在发送请求之前做些什么
return config;
},
[
function (config) {
// 在发送请求之前做些什么
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
]
],
// 响应拦截器
responseInterceptors: [
function (response) {
// 对响应数据做点什么
return response;
},
[
function (response) {
// 对响应数据做点什么
return response;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
]
]
};
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: 配置（ 支持 axios 所有配置）
返回值: Promise
useRequest
request 的封装，返回响应式 loading、error、 data