fetch与XHR的区别与优势

Fetch API更加现代

XHR 和 Fetch API 最显著的区别就是调用方式不同。这一点大家应该都知道吧。

举个例子，下面两端代码完成的是同一功能：

// 用 XHR 发起一个GET请求
var xhr = new XHMHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function(){
    console.log(xhr.response);
};

xhr.onerror = function(){
    console.log('something wrong~ ╮(￣▽￣)╭');
};

xhr.send();

// 用 Fetch 完成同样的请求
fetch(url).then(function(response){
    return response.json();
}).then(function(jsonData){
    console.log(jsonData);
}).catch(function(){
    console.log('something wrong~ ╮(￣▽￣)╭');
});

相比 XHR ，Fetch 结合了现代的编码模式，使用起来更简洁，完成工作所需的实际代码量也更少。

Fetch API更底层

其实，刚才说到的 Fetch API 并不是指仅仅一个 fetch 方法，还包括 Request、 Response、Headers、Body都一系列原生对象。对于传统的XHR而言，你必须使用它的一个实例来发出请求和处理响应。但是通过Fetch API，我们还能够通过刚才提到的原生对象，明确的配置请求和响应。这些底层的抽象让 Fetch API 比 XHR 更灵活。

举个例子，现在要下载一个很大的 utf-8 格式的 txt 文件，我们通过流式的响应体而不是文本的形式读取，最后显示在一个div中。(为什么使用流、使用流有什么好处我就不做过多解释了……)

document.addEventListener('DOMContentLoaded', function(e){
    var url = 'Test.txt';
    var div = document.getElementById('content');

    var progress = 0;
    var contentLength = 0;

    fetch(url).then(function(response){
        // 通过响应头获取文件大小
        contentLength = response.headers.get('Content-Length');

        var pump = function(reader){
            return reader.read().then(function(result){
                // 如果流中的内容读取完毕，result.done的值会变为true
                if (!result.done) {
                    // 获取流中的数据
                    var chunk = result.value;

                    var text = '';
                    // 流中的数据是一串字节码，需要做转码
                    for (var i = 3; i < chunk.byteLength; i++) {
                        text += String.fromCharCode(chunk[i]);
                    }

                    // 添加到页面的div中
                    div.innerHTML += text;

                    // 还可以用流的长度显示当前进度
                    progress += chunk.byteLength;
                    console.log(((progress / contentLength) * 100) + '%');

                    // 开始读取下一个流
                    return pump(reader);
                }
            });
        }

        // 开始读取流中的信息
        return pump(response.body.getReader());
    })
    .catch(function(error){
        console.log(error);
    });
});

在上面的例子中，我们不止使用了流来下载文件，还通过响应头获取了响应的具体信息，显示了下载的进度。虽然使用XHR也能做到使用流来读取文件，不过现在应该只有IE浏览器支持。但是 Fetch API 提供了访问数据的实际字节的方法，而 XHR 的 responseText 只有文本形式，这意味着在某些场景下它的作用可能非常有限。

Fetch API更接近未来

当我们在谈论 Fetch API 时，我们在谈论的不止是这些已经胜过 XHR 的地方，更是在谈论 Fetch API未来的可能性。比如未来基于 Fetch 和 Service Worker 的缓存和请求拦截技术。