来聊一聊window.fetch

秒速五厘米 2023-02-28 09:00 21阅读 0赞

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