React中调用Restful请求（UmiRequest + Redux + Saga）

分包结构

{
	"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

1. size: 9k (Axios: 14k)
2. post simplification（post简化）
3. cache（缓存）
4. error check（错误检查）
5. prefix（前缀）
6. suffix（后缀）
7. processing gbk（处理gbk）
8. 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);