基础 | Fetch -- http请求的另一种姿势

前端爱好者的知识盛宴

传统Ajax是利用XMLHttpRequest(XHR)发送请求获取数据，不注重分离的原则。而Fetch API是基于Promise设计，专为解决XHR问题而出现。

简介

XMLHttpRequest是一个设计粗糙的API，其中配置和调用方式非常混乱。

使用XHR发送一个json请求：

使用fetch做请求后：

es6写法：

处理text/html响应：

获取头信息：

设置头信息：

提交表单：

提交json数据：

fetch特点

1. 语法简洁，更加语义化

2. 基于标准 Promise 实现，支持 async/await

3. 同构方便，使用isomorphic-fetch

fetch兼容性

浏览器兼容性

fetch原生支持性不高，不过可以使用一些polyfill。

1. IE8是es3语法，需要引入es5的polyfill：es5-shim

2. 支持promise语法：es6-promise

3. fetch的polyfill：fetch-polyfill

4. 使用jsonp还需要引入：fetch-jsonp

5. 开启babel的runtime模式，可以使用async/await

fetch常见问题

1. fetch请求默认不带cookie，需要设置fetch(url,{credentials: 'include'});
2. 服务器返回400、500错误码不会reject，只有网路错误请求不能完成时才会reject;

总结

fetch API看起来简单，却是js语法不断增强提高带来的改善。

由于项目中普遍会引入各种库去解决底层问题，对于基础api的新增、拓展不太关注，久而久之会产生一种与标准的脱离感。以后应多多关注底层api的变化与基础实现。