一直以来,我们使用的Ajax技术,实际是由各浏览器的XMLHttpRequest(XHR)对象实现。但由于XHR接口难用而且落后(不能Promise),所以实际项目中一般采用jQuery这种第三方库封装的Ajax功能。
Fetch API,W3C的正式标准,是XMLHttpRequest的最新替代技术:
下图是3种资源请求方式
很明显,FetchAPI更现代、更清晰
1. Fetch经典示例
语法:
fetch(url, initParams) fetch(new Requst(url, initParams)) 注:上面2种写法等价
initParams常用参数说明:
method:"GET", "POST",默认为GET;
url: 请求的url;
headers: 请求携带的Headers对象;
body: POST请求主体;
注:GET请求中携带body会报错!
credentials: "omit"、"same-origin"、"include",默认为"omit";
注:omit->从不发送Cookie;
same-orign->同源才发送Cookie;
include->总是发送Cookie;
response常用方法说明:
status: 响应状态码(例如:200,成功); statusText: 与状态码一致的状态信息; ok:表示响应成功(200~299)还是失败; headers: 响应中的Headers对象; bodyUsed: 标识response是否已经被读取过; 注:Fecth API为保持对未来“流”API的支持, 限制response只能被读取一次; json(): 返回被解析为JSON格式的Promise对象; text(): 返回被解析为String格式的Promise对象;
Headers常用方法说明:
append(name,value) delete(name) get(name) getAll() has(name) set(name,value) headers.keys() headers.values()
例:
2. 使用Fetch上传文件
喜大普奔!!
可以用Fetch上传文件!!
以前我们上传文件只能通过Form的submit,为了处理上传成功的回调,出现了很多稀奇古怪的hack写法,现在Fetch就允许我们自行控制上传流程!!!
例:
怎么样?很给力有木有!!
更详细的Fetch API说明,请参考MDN官网....
参考:
https://fetch.spec.whatwg.org/ https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API