来聊一聊window.fetch

来聊一聊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.