JavaScript中的HTTP请求|极客笔记

JavaScript中的HTTP请求

介绍

在前端开发中，经常需要与后端进行数据交互。HTTP请求是实现前后端交互的一种常见方式。本文将详细介绍JavaScript中如何发起HTTP请求，并提供一些示例代码。

XMLHttpRequest

在早期的JavaScript中，使用XMLHttpRequest对象来发起HTTP请求是一种常见的方法。XMLHttpRequest最初被设计用于XML数据的传输，但随着发展，它也被广泛应用于其他类型的数据传输。

发起GET请求

以下是使用XMLHttpRequest对象发起GET请求的示例代码：

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

在上述代码中，首先创建了一个XMLHttpRequest对象，并使用open方法指定了请求的方法和URL。第三个参数指定了请求是否为异步，默认为true，表示异步请求。然后，通过onreadystatechange属性指定了一个回调函数，该回调函数将在请求状态变化时执行。最后，调用send方法发送请求。

发起POST请求

以下是使用XMLHttpRequest对象发起POST请求的示例代码：

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/submit", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
const data = {
  name: "John",
  age: 25
};
xhr.send(JSON.stringify(data));

在上述代码中，除了与GET请求相似的部分外，还调用了setRequestHeader方法设置请求头，指定了请求体的内容类型为JSON。然后，通过send方法发送请求，并将数据作为参数传递。

发起其他类型的请求

除了GET和POST请求外，还可以使用XMLHttpRequest发起其他类型的请求，如PUT、DELETE等。只需在open方法中指定对应的HTTP方法即可。

Fetch API

Fetch API是一种现代的HTTP请求技术，它基于Promise，提供了更简洁、更强大的方式来发起HTTP请求。

发起GET请求

以下是使用Fetch API发起GET请求的示例代码：

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

在上述代码中，通过调用fetch函数并传入URL即可发起GET请求。fetch函数返回一个Promise对象，可以使用.then方法处理成功的情况，使用.catch方法处理失败的情况。在成功处理成功的情况时，可以调用response.json()方法来解析响应的JSON数据。

发起POST请求

以下是使用Fetch API发起POST请求的示例代码：

fetch("https://api.example.com/submit", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "John",
    age: 25
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在上述代码中，除了传递URL外，还传递了一个包含请求方法、请求头和请求体的对象作为第二个参数。调用JSON.stringify方法将数据转换为字符串，并使用body属性将数据传递给请求。然后，可以使用.then方法处理响应的数据。

发起其他类型的请求

类似XMLHttpRequest，Fetch API也可以方便地发起其他类型的请求，只需在第二个参数中指定对应的HTTP方法即可。

axios

axios是一个流行的第三方库，用于发送HTTP请求。它提供了更高级的功能，如拦截请求和响应、自动转换请求数据和响应数据等。

安装axios

在使用axios之前，需要先安装它。可以通过npm或yarn进行安装：

npm install axios

或者

yarn add axios

发起GET请求

以下是使用axios发起GET请求的示例代码：

import axios from "axios";
axios.get("https://api.example.com/data")
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

在上述代码中，通过调用axios.get方法并传入URL即可发起GET请求。get方法返回一个Promise对象，可以使用.then方法处理成功的情况，使用.catch方法处理失败的情况。通过访问response.data可以获取响应的数据。

发起POST请求

以下是使用axios发起POST请求的示例代码：

import axios from "axios";
axios.post("https://api.example.com/submit", {
  name: "John",
  age: 25
})
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

在上述代码中，除了传递URL外，还传递了一个包含请求体数据的对象作为第二个参数。通过访问response.data可以获取响应的数据。