[JavaScript知识库]Fetch

介绍

XMLHttpRequest(XHR) 和 Fetch 都是浏览器的原生API，
XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，存在 回调地狱 的问题
Fetch 的出现就是为了解决 XHR 的问题，拿例子说明：

// XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', "http://abc.com");
xhr.responseType = 'json';
 
xhr.onload = function() {
  console.log(xhr.response);
};
 
xhr.onerror = function() {
  console.error("there is a error");
};

xhr.send();


// Fetch 
fetch("http://abc.com").
then(response => {
    response.json()
}).
then(data => {
    console.log(data)
}).
catch(e => {
    console.error("there is a error", e)
})

// Fetch 的 异步函数同步化 使用形式
async function aaa() {
    try {
        let response = await fetch("http://abc.com");
        let data = response.json();
        console.log(data);
    } catch(e) {
        console.error("there is a error", e)
    }
}