XHR 和 Fetch 的使用详解和区别总结

在Fetch出现之前我们发送异步请求默认都是通过ajax，底层使用了宿主环境的（XHR）XMLHTTPRequest 对象来实现异步请求。实现代码如下：

var xhr = new XMLHttpRequest();
xhr.open("get","example.php", true);
xhr.send(null);
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status == 200){
            alert(xhr.responseText);
        }
    }
}

    
    

    
    
1
2
3
4
5
6
7
8
9
10

当然我们一般会用一些封装过的ajax实现解决传统方式的繁琐写法以及xhr低版本浏览器可能出现的兼容问题，比如jquery的ajax：

$.ajax({
  url: 'example.asp',
  type: 'get',
  success: function(){
  }
})

    
    

    
    
1
2
3
4
5
6

Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
fetch的基本用法

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response
  })
  .then(function(response) {
    console.log(response);
  });

    
    

    
    
1
2
3
4
5
6
7

是不是看上去和jquery以及一些流行的框架的http库很相似。但是你不要忘了，fetch是浏览器原生支持的，使用fetch可以不用引用http的类库即可实现。fetch默认返回 一个promise对象。非支持async 和await，使用它可以更加简洁的编写我们的http请求逻辑。

注意点：
1.fetch是有兼容问题的
IE系列是完全不支持的，主流浏览器的早起版本也不支持，所以如果在项目中使用需要做兼容方案处理。
2.fetch 不管请求处理成功还是失败，都会触发promise的resolve状态回掉。这个和传统的ajax 框架是有点区别的。fetch只有当网络故障导致请求发送失败或者跨域的时候才会触发reject的逻辑。我们可以通过response 对象的ok是否是true来判断是否是真正的成功。

fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    return response.blob();
  }
  throw new Error('Network response was not ok.');
}).then(function(myBlob) { 
  var objectURL = URL.createObjectURL(myBlob); 
  myImage.src = objectURL; 
}).catch(function(error) {
  console.log('There has been a problem with your fetch operation: ', error.message);
});

    
    

    
    
1
2
3
4
5
6
7
8
9
10
11

3.fetch配置请求是否携带cookie和接受服务端写入cookie是通过设置credentials

// 所有情况都携带cookie
fetch('https://example.com', {
  credentials: 'include'  
})
// 目前改为默认是same-origin
// 同源的情况下带cookie
fetch('https://example.com', {
  credentials: 'same-origin'  
})
// 忽略cookie
fetch('https://example.com', {
  credentials: 'omit'  
})

    
    

    
    
1
2
3
4
5
6
7
8
9
10
11
12
13

4.fetch不想xhr可以原生支持异步请求，fetch因为默认是一个promise的对象。所以如果想用同步的写法，可以借助async await 来实现。

async function getInfo(){
    const res = await fetch('http://www.test.asp');
    const result = await res;
    return result;
}

    
    

    
    
1
2
3
4
5

Fetch更多参数

fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })

    
    

    
    
1
2
3
4
5
6
7
8
9
10
11
12
13

需要注意的是，该语法是比较新的用法，浏览器的支持可能会随着升级产生一些变化。所以切记做好兼容探测处理。避免意外出现。