React中调用Restful请求(UmiRequest + Redux + Saga)to be continue...
分包结构
{
"api": {
"模块1": {
"Dao.ts": "Dao class 内加入各个函数 return request.请求方式(url)",
"Service.ts": "承接参数返回 Dao 中对应函数"
},
"...": "...",
"Params.d.ts": "Dao 中常用的 Params 接口(interface),以 namespace 的方式直接声明"
},
"core": {
"request.ts": " UmiRequest 的基础配置,export extend 函数"
},
"store": {
"store.ts": "",
"sagas.ts": "引入所有 pages 中的 saga 作为一个 rootSaga",
"reducers": "引入所有 pages 中的 reducer 作为一个 rootReducers"
},
"pages": {
"路由模块1": {
"业务组件1": {},
"业务组件2": {},
"'路由模块 Page Component'.ts": 'Page',
"action.ts": "",
"reducer.ts": "",
"saga.ts": ""
}
},
}
UmiRequest学习见解
Why UmiRequest
UmiRequest 是基于 Fetch 封装的网络请求库,在一定程度上借用了 Axios 和 Fetch 的设计理念
Positive
- size: 9k (Axios: 14k)
- post simplification(post简化)
- cache(缓存)
- error check(错误检查)
- prefix(前缀)
- suffix(后缀)
- processing gbk(处理gbk)
- middleware(中间件)
extend
创建实例使用,按需加入配置项
RequestOptionsInit
errorHandler
官方:异常处理, 或者覆盖统一的异常处理
实际使用:当错误码大于等于400时直接弹窗报错
headers
官方:fetch 原有参数
实际使用:设置Accept: ‘application/json’
credentials
官方:fetch 请求包含 cookies 信息
默认: ‘same-origin’
可填:‘include’ | ‘omit’ | ‘same-origin’
- include
为了让浏览器发送包含凭据的请求(即使是跨域源) - same-origin
如果只想在请求 URL 与调用脚本位于同一起源处时发送凭据 - omit
浏览器在请求中不包含凭证
paramsSerializer
官方:开发者可通过该函数对 params 做序列化
用法: paramsSerializer: params => { return qs.stringify(params, { arrayFormat: 'brackets' }); }
arrayFormat
arrayFormat?: 'indices' | 'brackets' | 'repeat' | 'comma';
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
拦截器
拦截器的触发优先级高于中间件
本项目中没有使用,使用了中间件自己封装了
request拦截器
request拦截器, 改变url 或 options.
request.interceptors.request.use((handler: RequestInterceptor, options?: OnionOptions) => void);
response拦截器
response拦截器, 处理response, 提前对响应做异常处理
request.interceptors.response.use((handler: ResponseInterceptor, options?: OnionOptions) => void);