fetch通信

随着前端异步的发展, XHR 这种耦合方式的书写不利于前端异步的 Promise 回调. 而且,写起来也是很复杂. fetch API 本来是在 SW(ServiceWorkers) 中提出的, 不过, 后面觉得好用, 就把他挂载到 window 对象下. 这样, 在前端的正常通信中, 我们也可以直接调用。

兼容性

作为一个未来常用的api,看一下他的兼容性。

可以看到，在比较流行的浏览器中都是已经兼容了Fetch API的。我们可以通过对 window.fetch 的能力检测，判断出浏览器是否支持 Fetch API。github 官方推出了一个 Fetch API 的 polyfill 库，可以让更多浏览器提前感受到 Fetch API 的便捷的开发体验。

基本使用

我认为, fetch 就是 ajax + Promise. 使用的方式和 jquery 提供的 $.ajax() 差不多。

fetch('http://localhost:3331/getValue?key=101010100')
    .then(function (response) {
   
            if (response.status !== 200) {
   
                console.log(`返回的响应码${
     response.status}`)
                return
            }

            // 获取返回数据
            response.json().then(function (data) {
   
                document.body.innerText = data.toString()
                console.log(data)
            })
        }
    ).catch(function