来聊一聊window.fetch

Fetch 是浏览器提供的原生 AJAX 接口。使用 window.fetch 函数可以代替以前的 $.ajax、$.get和 $.post。

AJAX 的原理

  var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState === 4 && this.status === 200) {console.log(this.responseText);}};xhttp.open("GET", "/", true);xhttp.send();

$.ajax('/').then(function(response){console.log(response)
})

由于使用 XMLHttpRequest 对象来发送异步请求的相当麻烦，所以大家才喜欢使用 jQuery 提供的 $.ajax 方法。

Fetch的出现

随着 React.js、Angular.js 和 Vue.js 这些前端框架的流行，很多单页面应用已经不再使用 jQuery 了，这意味着你要自己对 XMLHttpRequest 进行封装，而很多人选择封装一个跟 jQuery.ajax 差不多的接口。Fetch API 的出现了-就是浏览器帮你把 jQuery.ajax 给实现了，以后大家都是用 fetch 来发送异步请求就好了。

Fetch用法

fetch('/').then(function(response){return response.json();}).then(function(data){}).catch(function(err){});

处理Text/HTML

fetch('/').then(function(response){return response.text();
}).then(function(data){}).catch(function(err){});

提交参数

fetch('/', {method: 'post',body: new FormData(...),headers: {'Accept': 'application/x-www-form-urlencoded','Content-Type': 'application/json'}
});

fetch('/', {method: 'post',body: JSON.stringify({...}),headers: {'Accept': 'application/json','Content-Type': 'application/json'}
});

Fetch API 的特点

基于 Promise（如果你没有学过 Promise，强烈建议你学一学）
不需要依赖第三方库，就可以优雅地使用 AJAX

Fetch API 的问题

使用 fetch 无法取消一个请求。这是因为 Fetch API 基于 Promise，而 Promise 无法做到这一点。不过相信很快就会有对策。

兼容性

有的浏览器没有 Fetch API，没有关系，只要引入一个 polyfill 就可以了：GitHub - github/fetch: A window.fetch JavaScript polyfill.

来聊一聊window.fetch相关推荐

Javascript window.fetch API
Javascript window.fetch API 关于Ajax,一个最让人诧异的秘密就是,XMLHttpRequest的底层API其实并不是为现在普遍流行的做法设计的,它本是用来做其它事情的.虽 ...
h5的fetch方法_Javascript window.fetch API
关于Ajax,一个最让人诧异的秘密就是,XMLHttpRequest的底层API其实并不是为现在普遍流行的做法设计的,它本是用来做其它事情的.虽然XMLHttpRequest目前为止提供的API还是非 ...
在JS 中使用 fetch 初体验
在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest ...
“约见”面试官系列之常见面试题之第七十八篇之fetch（建议收藏）
etch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案.fetch不是ajax的进一步封装,而是原生js.Fetch函数就是原生js,没有使用XMLHttpRequest对 ...
Js中fetch方法
Js中fetch方法 fetch()方法定义在Window对象以及WorkerGlobalScope对象上,用于发起获取资源的请求,其返回一个Promise对象,这个Promise对象会在请求响应后被 ...
传统 Ajax 已死，Fetch 永生
原谅我做一次标题党,Ajax 不会死,传统 Ajax 指的是 XMLHttpRequest(XHR),未来现在已被 Fetch 替代. 最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 ...
fetch 另一种ajax解决方案
AJAX即"Asynchronous JavaScript and XML"(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术. 传统的aj ...
ajax fetch api,fetch 简介: 新一代 Ajax API
AJAX半遮半掩的底层API是饱受诟病的一件事情. XMLHttpRequest 并不是专为Ajax而设计的. 虽然各种框架对 XHR 的封装已经足够好用, 但我们可以做得更好.更好用的API是 fe ...
vue 使用fetch 出现问题解决以及相应知识学习
使用fetch 进行请求出现的问题 :8080/#/ohho:1 Failed to load http://test.houd.cn:8081/rest/api/test/async/: Respo ...

来聊一聊window.fetch

来聊一聊window.fetch

来聊一聊window.fetch相关推荐

最新文章

热门文章