新一代Ajax API Fetch 局部刷新技术

前后端交互，异步加载等首先想到的ajax，好像在我们的认知中除了ajax就没有别的了。其实我们都被这种观念误导了，ajax只是对于XMLHttpRequest的一种封装，我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通信的技术。而Fetch API则是XMLHttpRequest的最新替代技术， 它是W3C的正式标准。

 

 

这是兼容情况:

 

 

现在我们用的， XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。

Fetch 的出现就是为了解决 XHR 的问题，拿例子说明：

 

 

使用 原生JS XHR ：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.xxx.com/api.php');
xhr.responseType = 'json';
 
xhr.onload = function() {
  console.log(xhr.response);
};
 
xhr.onerror = function() {
  console.log("Oops, error");
};
 
xhr.send();

 

 

使用 jQuery Ajax：

$.ajax({
    type: 'POST',
    url: 'https://www.xxx.com/api.php',
    data: JSON.stringify({
        jsonrpc: 2.0,
        method: 'user_member',
        params: {
            sign: $.md5('member' + iDitor.EncRypt()),
            userId: iDitor.All__Uid
        },
        id: 6
    }),
    timeout: 60000,
    cache: false,
    beforeSend: function() {},
    dataType: 'JSON',
    success: function(data) {
        if (data.result) {
            console.log(data.result);
        }
    }
});

 

 

使用 新的 Fetch API：

let req = new Request('https://www.xxx.com/api.php', {
    method: 'POST',
    cache: 'reload',
    body: JSON.stringify({
        jsonrpc: 2.0,
        method: 'user_member',
        params: {
            sign: $.md5('member' + iDitor.EncRypt()),
            userId: iDitor.All__Uid
        },
        id: 6
    })
});
fetch(req).then(function(response) {
    return response.json();
})
.then(function(json) {
    if (json.result) {
        console.log(json.result);
    }
})
.catch(function(error) {
    console.error('error', error)
});

 

 

ES6的 Fetch 的 写法：

let url = JSON.stringify({
    url: 'https://www.xxx.com/api.php',
    jsonrpc: 2.0,
    method: 'user_member',
    params: {
        sign: $.md5('member' + iDitor.EncRypt()),
        userId: iDitor.All__Uid
    },
    id: 6
}),
fetch(url).then(res => res.json())
.then(res => console.log(res))
.catch(err => console.log(err));