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