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