JavaScript中如何发送GET请求？-js教程-PHP中文网

JavaScript中如何发送GET请求？

裘德小鎮的故事

发布： 2025-05-11 23:54:02

原创

721人浏览过

在javascript中发送get请求的常见方法有两种：1. 使用xmlhttprequest对象，适合需要兼容旧版浏览器的场景；2. 使用fetchapi，适用于现代开发，因其简洁、支持promise和async/await。

JavaScript中如何发送GET请求？

在JavaScript中发送GET请求的常见方法是使用XMLHttpRequest对象或更现代的fetchAPI。让我们深入探讨这两种方法的使用方式、优劣势以及一些实用的技巧。

当我在项目中需要从服务器获取数据时，我常常会选择fetchAPI，因为它更简洁、更现代，而且支持Promise，这让我可以更优雅地处理异步操作。不过，XMLHttpRequest仍然有它的用武之地，特别是在需要兼容旧版浏览器的场景中。

让我们先看看如何使用XMLHttpRequest发送GET请求：

立即学习“Java免费学习笔记（深入）”；

// 使用 XMLHttpRequest 发送 GET 请求
function fetchDataUsingXHR(url) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('成功获取数据:', xhr.responseText);
        } else {
            console.error('请求失败，状态码:', xhr.status);
        }
    };
    xhr.onerror = function() {
        console.error('请求错误');
    };
    xhr.send();
}

// 示例调用
fetchDataUsingXHR('https://api.example.com/data');

登录后复制

虽然XMLHttpRequest可以很好地工作，但在现代开发中，我更倾向于使用fetchAPI，因为它更简洁、更易读，并且与现代JavaScript的异步编程模型（Promise和async/await）无缝集成。让我们看看如何使用fetchAPI：

Get笔记

Get笔记，一款AI驱动的知识管理产品

125

查看详情

// 使用 fetch API 发送 GET 请求
function fetchDataUsingFetch(url) {
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应异常');
            }
            return response.json();
        })
        .then(data => {
            console.log('成功获取数据:', data);
        })
        .catch(error => {
            console.error('获取数据时出错:', error);
        });
}

// 示例调用
fetchDataUsingFetch('https://api.example.com/data');

登录后复制

使用fetch的一个重要优势是它返回一个Promise，这让我们可以使用async/await来编写更清晰的代码：

// 使用 async/await 与 fetch API 发送 GET 请求
async function fetchDataUsingAsyncAwait(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('网络响应异常');
        }
        const data = await response.json();
        console.log('成功获取数据:', data);
    } catch (error) {
        console.error('获取数据时出错:', error);
    }
}

// 示例调用
fetchDataUsingAsyncAwait('https://api.example.com/data');

登录后复制

在实际应用中，我发现使用fetchAPI时需要注意一些细节：