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

在JavaScript开发中，网络请求是不可或缺的一部分，下面是三种常用的实现网络请求的方式：

1. XMLHttpRequest请求

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

1.1 示例代码

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);
}

1.2 示例说明

上面的代码是简单封装了一个XMLHttpRequest请求的函数，传入参数包括请求的URL、请求的方式和请求成功之后的回调函数，函数中实例化了一个XMLHttpRequest对象，调用open方法与服务器建立连接，调用onreadystatechange事件监听状态变化，当状态为4且服务器返回状态码为200时就会执行回调函数。

2. fetch请求

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

2.1 示例代码

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

2.2 示例说明

上面的代码是简单封装了一个fetch请求的函数，传入参数包括请求的URL，请求的方式和请求成功之后的回调函数，函数中使用fetch(url,options)函数进行请求，返回一个Promise对象，Promise对象成功之后调用then方法执行回调函数。

3. axios请求

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

3.1 示例代码

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