随着前端异步的发展, 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