实现一个简单的网络请求

XMLHttpRequest

xhr = new XMLHttpRequest();
xhr.open('GET',  'data.txt',  true);
xhr.send();
xhr.onreadystatechange = function(){
  if(xhr.readyState == 4){
    if(xhr.status == 200){
      success(xhr.responseText);
    } else {
      if(failed){
         failed(xhr.status);
      }
    }
  }
}

fetch

Fetch 的核心是HTTP Request/Response/Header/Body 的接口，以及 fetch 方法

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers:{
    'Content-Type': 'application/json'
  }
}).then(res => res.json())
.catch(error => console.error('Error:', error))

Fetch 与 XMLHttpRequest 的区别

XHR 基于事件机制实现请求成功与失败的回调，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱[1]。

Fetch 通过 Promise 来实现回调，调用更加友好。

• 当接收到一个代表错误的 HTTP 状态码(404 或 500)时，从 fetch()返回的 Promise 不会被标记为 reject，相反标记了 resolve（但ok 属性设置为 false）。仅当网络故障时或请求被阻止时，才会标记为 reject。
• 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 若要发送 cookies，必须设置 credentials 属性。