基于axios
的网络请求库,返回格式默认是{code, data, msg}
常用方法有:get
post
put
delete
等等,并添加了 form
update
download
三个方法
yarn add @gdin/request
用法同axios
,只是对post
put
patch
有所修改
import request from '@gdin/request';
# 默认
request.defaults.timeout = 12000;
request.defaults.withCredentials = true;
# 业务方设置全局配置
request.defaults.baseURL = '/api';
request.defaults.dataMode = 'simple';
request.defaults.headers.common.Authorization = 'Basic c3RhcnRlcjpzdGFydGVyLXNlY3JldA==';
#......
对axios
的defaults
以及config
扩展了一个属性dataMode
,用来设置返回值格式:
值 | 说明 |
---|---|
default | 默认,会把数据封装成 { code: number , data: Data , msg: string } 格式 |
simple | 只返回 data 数据 |
all | 后端接口返回什么就是什么 |
其他配置项请前往 [ Axios Config ] 查看
针对 post
put
patch
这三个方法的参数,做了些微调整,例如:
原 post 方法是:axios.post(url[, data[, config]])
,请求体参数data
是作为第二个参数放置的, 现将data
合并进config
里面,改为两个参数即可。
即:axios.post(url[, data[, config]])
=> request.post(url[, config])
- 例子:
request.post('/user/save', {
data: {
username: 'test',
name: '测试'
}
})
request.form(url[, config])
request.upload(url[, config])
request.download(url[, config])
是 POST 请求,并自动将请求头的中 content-type 改为application/x-www-form-urlencoded
是POST
请求,默认不设置请求超时时间,即timeout = 0
,可配置onUploadProgress
监听上传进度
默认是GET
请求,可在config
中添加method
指定其他请求类型,默认不设置请求超时时间,即timeout = 0
,可配置onDownloadProgress
监听下载进度
关于在请求头设置或者更新登录凭证Authorization
的值,可在登录成功后将数据存储到localStorage
,存储的key
要求是:
-
SYSTEM_TOKEN
: Authorization 的值 -
SYSTEM_TOKEN_EXPIRE
: 过期时间(毫秒)
每个请求再发起时都会在拦截器 axios.interceptors.request
里从localStorage
提取数据设置Authorization
的值。
例子:
request.form('/login', {data}).then((res) => {
const { access_token, token_type, expires_in } = res;
# 保存token值
window.localStorage.setItem('SYSTEM_TOKEN',`${token_type} ${access_token}`);
# 保存token过期时间
window.localStorage.setItem('SYSTEM_TOKEN_EXPIRE',`${Date.now() + expires_in * 1000}`);
});