fetch 的使用
来源:互联网 发布:linux 黑客技术 编辑:程序博客网 时间:2024/06/08 09:08
现在应该很少有人用原生的JS内置XMLHttpRequest对象写异步调用了,仍然用的比较多的应该是Jquery的ajax方法,例如:
$.ajax({ type: 'get', url: location.herf, success: function(data){ console.log(data); }})
最近写一个demo用到了fetch API,顿时觉得比ajax好用n倍,遂记录之。
fetch 介绍
fetch API 来源于 Promise ,可参见:Promise;
fetch的API 也可以参见:fetch;
fetch()方法调用两个参数:
fetch(input, init)
其中:
input
* 定义要获取的资源。这可能是:一个 USVString 字符串,包含要获取资源的 URL。一些浏览器会接受 blob: 和 data:
* 作为 schemes.一个 Request 对象。
input直白来说等于ajax中传入的url;
fetch()另一个参数 init可以配置其他请求相关参数,相当于ajax里的type,这个参数是可选的,包括:
method: 请求使用的方法,如 GET、POST.
headers: 请求的头信息,形式为 Headers 对象或 ByteString。
body: 请求的 body 信息,可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。(如果是 GET 或 HEAD 方法,则不能包含 body 信息)
mode: 请求的模式,如 cors、 no-cors 或者 same-origin。
credentials: 请求的 credentials,如 omit、same-origin 或者 include。
cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached。
fetch()的success callback 是用 .then()完成的,实际上按照我的理解,fetch()就是一个Promise对象的实例,Promise对象实例如下:
new Promise( /* executor */ function(resolve, reject) {...});
var promise = new Promise(function(resolve, reject) { if (/* 异步操作成功 */){ resolve(value); } else { reject(error); }});promise.then(function(value) { // success}, function(value) { // failure});
所以fetch()中,通过.then()调用异步成功函数resolve,通过.catch()调用异步失败函数reject;
拼装在一起,就有:
fetch(location.herf, { method: "get"}).then(function(response) { return response.text()}).then(function(data) { console.log(data)}).catch(function(e) { console.log("Oops, error");});
这其中,第一步.then()将异步数据处理为text,如果需要json数据,只需要 :
function(response) {return response.json()}
用es6箭头函数写,就是:
fetch(url).then(res => res.json()) .then(data => console.log(data)) .catch(e => console.log("Oops, error", e));
fetch 兼容性
所有的ie都不支持fetch()方法,所以,考虑兼容性,需要对fetch()使用polyfill;
使用Fetch Polyfil来实现 fetch 功能:
npm install whatwg-fetch –save
对于ie,还要引入Promise:
npm install promise-polyfill –save-exact
考虑到跨域问题,需要使用Jsonp,那么还需要fetch-jsonp:
npm install fetch-jsonp
至此,则有:
import 'whatwg-fetch';import Promise from 'promise-polyfill';import fetchJsonp from 'fetch-jsonp';fetchJsonp('/users.jsonp') .then(function(response) { return response.json() }).then(function(json) { console.log('parsed json', json) }).catch(function(ex) { console.log('parsing failed', ex) })
Ref:
- 传统 Ajax 已死,Fetch 永生
- 使用更优雅的异步请求API——fetch
- MDN web docs
- FETCH NEXT的使用
- fetch 的使用
- fetch next from的使用
- Hibernate开发------fetch的使用
- git fetch的使用介绍
- 使用Fetch
- 使用 Fetch
- hibernate中fetch使用之间的区别
- 游标的使用 DECLARE CURSOR FETCH
- React-Native之fetch的使用
- 使用fetch遇到过的坑
- 使用fetch上传文件失败的解决方案
- 使用fetch post json数据的问题
- fetch使用的常见问题及解决办法
- fetch和lazy结合使用的情况
- fetch使用的常见问题及解决办法
- fetch使用的常见问题及解决办法
- 使用fetch代替传统的Ajax
- linux centos6.x版本net模式静态ip联网
- MyBatis使用foreach进行批量插入遇到的问题以及解决方法
- 学习后缀自动机
- 关于DataReader的个人理解
- JavaScript-MD5加密
- fetch 的使用
- Spring整合Quartz
- 基数排序 c++实现
- test
- SQL UNION 操作符
- HDFS 常用文件操作命令
- QT Internal: 对象数据存储
- 期末课程设计-家谱管理系统
- Javascript-数组与对象的区别