JavaScript 网络请求|极客笔记

JavaScript 网络请求

在Web开发中，JavaScript经常用来与服务器进行交互，获取数据或更新页面内容。网络请求是JavaScript中常见的操作之一，通过发送HTTP请求来获取数据或执行后端操作。本文将详细介绍如何在JavaScript中进行网络请求，包括使用原生XMLHttpRequest对象和使用现代的Fetch API。

使用 XMLHttpRequest 发起网络请求

XMLHttpRequest是JavaScript中用于发送HTTP请求的标准对象，可以发送各种类型的请求（GET、POST等），并且可以异步获取响应。下面是一个简单的使用XMLHttpRequest发送GET请求的示例：

// 创建一个新的XMLHttpRequest对象
let xhr = new XMLHttpRequest();

// 配置请求的参数
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

// 发送请求
xhr.send();

// 监听请求状态的变化
xhr.onreadystatechange = function() {
  if (xhr.readyState == XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
};

上面的代码演示了如何使用XMLHttpRequest发送一个GET请求，并在请求完成后打印响应内容。首先创建一个新的XMLHttpRequest对象，然后通过open方法设置请求的方法、URL和是否异步，最后调用send方法发送请求。在请求的状态改变时，通过监听onreadystatechange事件处理程序来获取响应数据。

使用 Fetch API 发起网络请求

Fetch API是现代Web开发中推荐的网络请求方法，它提供了更简洁的语法和更强大的功能。使用Fetch API可以发送各种类型的请求，并且支持Promise来处理响应数据。下面是一个使用Fetch API发送GET请求的示例：

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

上面的代码使用Fetch API发送一个GET请求，然后链式调用then方法来处理返回的Promise对象。第一个then方法将响应对象转换为JSON格式的数据，第二个then方法打印数据到控制台。如果请求过程中出现错误，会被catch方法捕获并打印错误信息。

发送 POST 请求

除了GET请求，我们还可以使用XMLHttpRequest和Fetch API发送POST请求来向服务器提交数据。下面是一个使用XMLHttpRequest发送POST请求的示例：

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader('Content-Type', 'application/json');

let data = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

xhr.send(JSON.stringify(data));

xhr.onreadystatechange = function() {
  if (xhr.readyState == XMLHttpRequest.DONE) {
    if (xhr.status === 201) {
      console.log('Post created successfully');
    }
  }
};

上面的代码中，我们创建一个新的XMLHttpRequest对象，并使用open方法指定请求方法为POST，然后通过setRequestHeader方法设置请求头的Content-Type为application/json。接着我们准备要发送的数据，并使用JSON.stringify方法将数据转换为JSON格式的字符串，最后调用send方法发送数据。在请求完成后根据状态码判断是否提交成功。

使用Fetch API发送POST请求也十分简单，下面是一个示例：

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在使用Fetch API发送POST请求时，我们通过传递一个包含method、headers和body字段的配置对象来设置请求参数。在then方法中处理返回的JSON数据，catch方法捕获错误信息。

使用 Axios 库简化网络请求

除了XMLHttpRequest和Fetch API以外，我们还可以使用第三方库Axios来简化网络请求的操作。Axios是一个基于Promise的HTTP客户端库，支持浏览器和Node.js环境。下面是一个使用Axios发送GET请求的示例：

npm install axios

const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

使用Axios发送GET请求和处理响应数据非常简单，只需调用get方法并传入URL，然后链式调用then方法处理数据或catch方法处理错误。