Fetch

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配合使用感觉还不错