JavaScript 中的 HTTP GET 请求：从入门到精通

2024-03-24 23:33:33

## JavaScript 中的 HTTP GET 请求

### 简介

HTTP GET 请求用于从服务器获取数据，是获取信息的最常见方法。在 JavaScript 中，可以使用多种方法来执行 HTTP GET 请求。本文将介绍三种最常用的方法：XMLHttpRequest 、fetch() 和 Axios 库 。

### 方法 1：XMLHttpRequest

XMLHttpRequest (XHR) 是一个内置的对象，用于向服务器发送请求。它是执行 HTTP GET 请求最传统的方法。

### 步骤：

创建 XMLHttpRequest 对象：
```
const xhr = new XMLHttpRequest();
```

配置请求：

xhr.open("GET", "https://example.com/api/data");

侦听请求状态改变事件：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // 请求成功，处理响应
      const data = xhr.responseText;
      console.log(data);
    } else {
      // 请求失败，处理错误
      console.error("Error:", xhr.status);
    }
  }
};

发送请求：
```
xhr.send();
```

### 方法 2：fetch()

fetch() 是一个较新的 API，它更简洁、更易于使用。

### 步骤：

发起请求：

fetch("https://example.com/api/data")
  .then(response => {
    if (response.ok) {
      // 请求成功，处理响应
      return response.text();
    } else {
      // 请求失败，处理错误
      throw new Error("Error:", response.status);
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

### 方法 3：Axios 库

Axios 是一个流行的第三方库，用于简化 HTTP 请求。

### 步骤：

安装 Axios：
```
npm install axios
```

发起请求：

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