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