现在应该很少有人用原生的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
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)
})