JS实现网络请求的三种方式梳理

1. XMLHttpRequest请求

XMLHttpRequest是一个原生JavaScript对象，它是一个浏览器提供的api，用来在浏览器和服务器之间发送HTTP请求和接收服务器数据。XMLHttpRequest请求的基本流程如下：
– 创建XMLHttpRequest对象
– 打开请求
– 设置回调函数
– 发送请求

function request(url,method,callback) {
  let xhr = new XMLHttpRequest();
  xhr.open(method,url,true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send(null);
}

2. fetch请求

fetch是一个基于Promise的网络请求api，Fetch API使用Promises避免XMLHttpRequest回调地狱。它使用起来更加简单，支持返回的数据类型包括json、arraybuffer、blog、text等，fetch请求的基本流程如下：
– 使用fetch(url,options)进行请求
– 返回一个Promise对象，调用then方法执行回调函数
– 其中回调函数的参数就是服务器返回的Response对象，我们可以调用Response对象实例的方法进行数据的处理

function request(url,method,callback) {
  fetch(url,{
    method: method
  }).then(function(response) {
    return response.text();
  }).then(function(text) {
    callback(text);
  });
}

缺点：

· 处理JSON数据的过程分为两步。第一个是发出请求，然后第二个是在响应时调用.json（）方法。默认情况下会收到JSON响应。

· 从Fetch()返回的Promise仅在网络故障或任何阻止请求完成的情况发生时拒绝。即使响应为HTTP 404或500，也不会拒绝HTTP错误状态。

· 缺乏其他库的一些有用功能，例如：取消请求。

· 默认情况下，Fetch不会从服务器发送或接收Cookie，如果站点依赖于维持用户会话，则会导致未经身份验证的请求。但是可以通过添加以下内容来启用：

{credentials: “same-origin.”}

3. axios请求

axios是一个流行的第三方库，它是一个基于Promise的网络请求框架，具有良好的性能和更好的使用体验，axios的使用与fetch类似，只需要调用axios方法进行请求即可。

function request(url,method,callback) {
  axios({
    method: method,
    url: url
  }).then(function(response) {
    callback(response.data);
  });
}

4. 请求封装