新一代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', url);
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: iDitor.All__Url,
                    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) {
                            U.User_Info_Fn(data.result);
                        }
                        U.WxList_Info();
                    }
                });

使用 新的 Fetch API：

var req = new Request(iDitor.All__Url, {
                    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) {
                            U.User_Info_Fn(json.result);
                        }
                        U.WxList_Info();
                    })
                    .catch(function(error) {
                        console.error('error', error)
                    });

ES6的 Fetch 的 写法

var url = JSON.stringify({
            jsonrpc: 2.0,
            method: 'user_member',
            params: {
                sign: $.md5('member' + iDitor.EncRypt()),
                userId: iDitor.All__Uid
            },
            id: 6
        }),
        fetch(url).then(response => response.json())
        .then(data => console.log(data))
        .catch(e => console.log("Oops, error", e));