😀 封装whatwg-fetch,这是一个解决低版本浏览器不支持fetch的垫片。
yarn add @jerry521/j-fetch
import jFetch from '@jerry521/j-fetch';
const fetchInstace = new jFetch('https://api.url',{
// 非必配置项,默认 'Content-Type':'application/json;charset=UTF-8',可覆盖
headers:{
'Custoum-x':'token'
},
// 非必配置项
beforeSend:(data,headers)=>{
// 回调统一处理组装参数,它是JSON字符串
const obj =JSON.parse(data);
Object.defineProperty(obj,'version',{ value:'1.0.0'})
return {
data:JSON.stringify(obj),
headers
};
},
// 非必配置项,默认 200-300 或者 400 是网络成功,其余按网络异常处理,可覆盖
checkStatus:(response)=>{
// TODO HTTP STATUS
},
// 非必配置项
handleData:(data)=>{
// TODO 处理data,得到result,例如解密报文、根据返回业务编码抛出异常
return result
},
// 非必配置项
success:(data)=>{
// TODO 请求成功后数据统一处理方案,例如 提示请求成功提示
Toast.info('成功')
},
failed:(err)=>{
// TODO 请求失败处理逻辑
Toast.failed(err.message);
},
})
// 请求示例
fetchInstace.get('/users').then(()=>{},()=>{})
.catch(()=>{})
fetchInstace.post('/user',{ name:'jerry', gender:'0'})
.then(()=>{},()=>{}).catch(()=>{})
// 卸载网络请求
fetchInstace.abort();
// 高级配置,详情参见 whatwg/fetch 规范
var input = document.querySelector('input[type="file"]')
var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')
fetchInstace('/avatars', {
method: 'POST',
body: data
})
fetch需要浏览器支持,由于低版本浏览器是通过垫片形式抹平浏览器差异,在这个过程中使用promise 帮助我们处理异步问题。但是部分浏览器不支持promise ,因此需要有诉求兼容低版本浏览器使用过程中 提前添加 promise垫片。
- Fetch是获取资源的API(不限于 网络资源) 后续补充其它功能
- Fetch是面向Javascript平台的统一API,适用场景广阔
- Fetch是一个功能强大、灵活的功能集合(与XMLHttpRequest相比较而言)
- Fetch对HTTP接口抽象出了 Request,Response,Headers,Body