JS 中的原生网络请求解读

在前端开发中，经常需要与服务器进行数据交互。其中最常用的方式就是通过网络请求来完成数据的获取和传输操作。JS 中提供了原生的网络请求 API，使得我们可以直接在代码中发送网络请求。本文将对 JS 中的原生网络请求进行详细讲解。

发送网络请求的方式

在 JS 中，我们可以使用以下两种方式来发送网络请求：

使用 XMLHttpRequest

XMLHttpRequest 是 JS 中用于发送 HTTP 请求的 API，因为其具有兼容性强、稳定可靠等特点，在前端开发中得到了广泛使用。

const xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象
xhr.open('GET', 'https://api.example.com/data'); // 配置请求参数
xhr.send(); // 发送请求

在发送请求前，我们需要通过 open 方法来进行请求的相关配置。在参数中，第一个参数表示请求的方式（例如 GET、POST 等），第二个参数表示请求的 URL 地址。通常情况下，我们还可以使用第三个参数来表示请求是否异步，默认是 true，即异步请求。

使用 fetch

fetch 是 JS 中的一种新的网络请求方式，更加简单易用，可以直接返回一个 Promise 对象。fetch 对象可以被传递给其他方法来进行更多的处理，例如转换成 JSON 数据、处理异常等。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

在使用 fetch 进行网络请求时，只需要传递请求的 URL 地址即可，默认是 GET 请求。

细节分析

在 JS 中发送网络请求时，我们需要注意以下几个细节点：

请求超时

网络请求时存在超时的情况，超时时间可根据需求进行设置。对于 XMLHttpRequest，可以使用 timeout 属性来设置超时时间；对于 fetch，可以在传递第二个参数来进行设置，例如：

const xhr = new XMLHttpRequest();
xhr.timeout = 5000;
xhr.open('GET', 'https://api.example.com/data');
xhr.send();

fetch('https://api.example.com/data', {
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 5000
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

跨域请求

在进行网络请求时存在跨域请求的情况，即在向其他域名下进行网络请求时，浏览器会存在安全策略的限制，不允许直接进行访问。对于 XMLHttpRequest，可以使用 withCredentials 属性和 XMLHttpRequest.withCredentials 方法来进行跨域请求。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.withCredentials = true;
xhr.send();

对于 fetch，需要在传递第二个参数时添加 mode 参数以及相关配置。

fetch('https://api.example.com/data', {
  headers: {
    'Content-Type': 'application/json'
  },
  mode: 'cors',
  credentials: 'include'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

示例

以下是两个基于 XMLHttpRequest 和 fetch 的网络请求示例。

XMLHttpRequest 示例

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.log('Error');
    }
  }
}
xhr.send();

fetch 示例

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

以上是 JS 中的原生网络请求的攻略讲解，希望对你的学习有所帮助。