README
xFetch
XFetch 是一个基于原生 fetch 的一个http 库,可以在浏览器中使用
Features
- 支持get, post
- 支持单个url开启缓存
- 支持全局对request 和 response开启拦截
- 支持设置请求超时时间
- 完整的错误反馈(包括网络错误,超时错误,后台json解析错误,拦截器终止)
- 支持全局xFetch请求行为(请求参数),也支持局部使用覆盖全局配置
浏览器支持
高级浏览器,ie9+
使用说明
npm install xFetch
post 使用说明:
- 需要传递配置对象options { method: "POST", data?: Object | 序列化好的字符串, transferType?: 'form' | 'url' | 'json', header?: { 'Content-type'?: String } }
- transferType 标示要传的数据类型, xFetch根据transferType值,会自动设置请求对象headers中的Content-Type
类型 | 数据类型 |
---|---|
form | 表示请求体 body 使用formData 形式上传,可以传文件或者普通数据 |
url(默认) | 请求体 body使用a=b&c=d形式上传,可以传普通数据 |
json | 请求体 body使用 {"a":"b","c":"d"} JSON格式上传,可以传送JSON结构的数据 |
拦截: 不管是请求拦截 还是响应拦截,如果有一个拦截器返回false,那后续同类型(请求/响应)的拦截器都会终止执行。 响应拦截如果返回false,除了后续拦截器不执行,还有其他影响,见下方 响应拦截。 使用: xFetch.interceptors.request.use(fn(config), context?) xFetch.interceptors.response.use(fn(config), context?)
全局配置/xFetch第二个配置字段说明:
data字段说明:
类型:可以是字符串 或 对象。
不论是GET还是POST都可以通过data表示要发送的数据,xFetch会根据情况格式化data。
cache 字段说明:
设置cache为true,则会以请求的url为key,缓存第一次响应结果。
后续同样的url请求,则会从缓存取结果。
作为缓存的url key,是去除了_t随机参数的url
备注: 根据cache原理,post由于数据放在body中,请求url一般是后台接口(没带参数)。
同一接口的POST请求,参数可能根据场景不一样,故POST请求 一般不适合 开启cache。
timeout 字段说明:
用于设置请求多少秒超时
cache: false,
credentials: 'include',
// 请求路径前缀
prefix: '',
// 合并data策略: replace merge,默认replace
// mergeDataStrategy: 'replace',
// POST方法中,包裹body中的data字段: {body: {data: {} } }
wrapperDataWithPost: false,
// 是否对参数进行encode
encodeParams: false,
method: 'GET',
headers: {},
// form url json
transferType: 'url',
//'json'| 'text'| 'blob' | 'formData' 响应对象的解析器类型,默认json
parserType: 'json',
// 要传输的数据
data: null,
// 默认20秒超时(单位:秒)
timeout: 20,
// 响应成功标志
codeok: 'core.ok'
```