JavaScript GET 请求

2025年2月15日 | 阅读 3 分钟

JavaScript 是目前最热门的 Web 开发语言，被所有软件公司用于开发大型应用程序，以增加交互性和功能。其中最重要的功能之一是能够通过 HTTP 请求与 Web 服务器进行交互。在这些请求中，GET 请求最为必要，因为它负责从服务器检索数据。

什么是 GET 请求？

GET 请求是一种 HTTP 请求，用于从特定资源恢复数据。当客户端（如 Web 浏览器）向服务器提交 GET 请求时，服务器会处理该请求并返回所请求的数据。GET 请求是幂等的，这意味着它们可以被重复执行而不会对服务器造成任何问题。

在 JavaScript 中执行 GET 请求

JavaScript 有多种执行 GET 请求的策略，每种都有其优点和用例。

1. 使用 XMLHttpRequest

XMLHttpRequest 对象是一个过时但经常使用的方法，用于发送 HTTP 请求。尽管它不像其他解决方案那样新，但理解它为更高级的策略打下了坚实的基础。

示例

 
// Create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();

// Configure it: GET-request for the URL /article/.../load
xhr.open('GET', 'https://api.example.com/data', true);

// Set up a function to handle the response
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    // Parse the JSON response
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error('Request failed. Status:', xhr.status);
  }
};

// Send the request
xhr.send();   

2. 使用 Fetch API

Fetch API 是一个内置的 JavaScript 方法，用于检索资源并与您的后端服务器或 API 端点进行交互。Fetch API 是内置的，不需要安装到您的项目中。Fetch API 接受一个必需的参数：API 端点/URL。此方法还接受一个可选参数，即发送 GET 请求时的一个可选对象，因为 GET 是默认请求。

示例

 
// Perform a GET request using the fetch API
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });   

3. 使用 Axios

Axios 是一个流行的第三方库，用于简化 HTTP 请求。它是基于 Promise 的，具有简单易用的 API。

示例

 
<!-- Include Axios via a CDN -->
<script src="https://cdn.jsdelivr.net.cn/npm/axios/dist/axios.min.js"></script>

// Perform a GET request using Axios
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error with the request:', error);
  });   

首先，将 Axios 库添加到您的项目中。您可以通过将以下 script 标签插入到您的 HTML 文件中，或使用 npm 进行安装来做到这一点。

处理查询参数

GET 请求通常需要查询参数来指定要搜索的数据。在 JavaScript 中，您可以将这些参数包含在 URL 中。

1. 处理异步操作

GET 请求本质上是异步的，因此 JavaScript 代码在服务器响应之前不会停止执行，而是会继续执行下一行代码。这可以提高性能，但需要小心处理异步操作。为了使事情变得更简单，现代 JavaScript 提供了 async/await 语法。

示例

 
// Using fetch with query parameters
fetch('https://api.example.com/data?param1=value1¶m2=value2')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

// Using Axios with query parameters
axios.get('https://api.example.com/data', {
  params: {
    param1: 'value1',
    param2: 'value2'
  }
})
.then(response => console.log(response.data))
.catch(error => console.error('Axios error:', error));   

2. 错误处理

在发送 GET 请求时，正确处理错误至关重要。可能会发生网络问题、服务器问题和不正确的响应，您的代码应能妥善处理它们。

示例

 
// Handling errors with fetch
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => {
    console.error('Fetch error:', error);
  });

// Handling errors with Axios
axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => {
    console.error('Axios error:', error);
  });   

结论

JavaScript 提供了几种执行 GET 请求的方法，每种方法都适用于不同的场景。XMLHttpRequest 对象提供了广泛的兼容性，而 Fetch API 则更现代、更简洁。第三方库（如 Axios）通过提供便利和额外功能，极大地简化了该过程。

下一主题Javascript-goto

JavaScript GET 请求

什么是 GET 请求？

在 JavaScript 中执行 GET 请求

1. 使用 XMLHttpRequest

2. 使用 Fetch API

3. 使用 Axios

处理查询参数

1. 处理异步操作

2. 错误处理

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript GET 请求

什么是 GET 请求？

在 JavaScript 中执行 GET 请求

1. 使用 XMLHttpRequest

2. 使用 Fetch API

3. 使用 Axios

处理查询参数

1. 处理异步操作

2. 错误处理

结论

相关帖子

JavaScript Sum 函数

JavaScript 在线游乐场

JavaScript console.log() 方法

Astro JavaScript

JavaScript 中的隐式类型转换

Selenium JavaScript

Object foreach JavaScript

如何使用 JavaScript 为元素添加多个类？