Fetch
之前所写的Ajax都是利用XMLHttpRequest实现的,可是也不难发现XMLHttpRequest并不是专为Ajax实现的,并且它也没有关注分离的原则,配置和调用方式比较混乱,不太友好,而基于Promise的Fetch就比较友好
相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch
简单介绍
fetch(input[, init]);
- input,定义要获取的资源,可以是URL或Request对象
- init,可选择的参数,配置项对象,包括method、headers、body等信息
- 返回值:一个promise对象,resolve时回传Response对象
示例如下:
var myImage = document.querySelector('img');
var myRequest = new Request('one.jpg'); //非URL,而是一个Request对象
fetch(myRequest).then(function(response) {
return response.blob();
}).then(function(response) {
var objectURL = URL.createObjectURL(response);
myImage.src = objectURL;
});
含有第二个参数的示例:
var init = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
fetch(URL, init).then(function(response) {
...
})
使用
发送JSON请求
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("err",err); //错误处理
});
可以使用ES6的箭头函数进行简化:
fetch(url).then(response => response.json()).then(
data => console.log(data)).catch(err => {
console.log(err);
})
Fetch除了语法简洁,语义化明显的优点之外,还支持async/await
async/await
async/await适用于执行一个耗时操作或者是异步操作,使用async执行所写的函数代码,而在函数内部使用await关键字来达到异步的目的
function sleep(time) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve();
}, time);
});
}
let test = async function () {
console.log('start');
await sleep(3000); //sleep 为一个执行需要耗费 3s 的函数
console.log('end');
};
test();
运行结果:
Fetch与async/await配合使用
let test = async function () {
try {
let response = await fetch(url);
let data = response.json();
} catch {
....
}
};
在前面的例子中,await
后面跟着 Promise 对象,表示等待resolve才会继续向下执行,如果 Promise 被 reject()
或抛出异常则会被外面的 try...catch
捕获
总结
目前而言,刚接触Fetch,但是确实很喜欢它的简洁,和async/await配合使用感觉还不错