JavaScript常用异步请求

原创已于 2024-11-23 23:11:54 修改 · 566 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2024-11-23 23:08:12 首次发布

在 JavaScript 中，异步请求通常通过 XMLHttpRequest 或现代的 fetch API 来实现。这些异步请求用于从服务器获取数据而不需要重新加载整个页面。下面我会分别介绍这两种常见的异步请求方法。

1. 使用 `XMLHttpRequest` 进行异步请求

XMLHttpRequest 是 JavaScript 中最早用于处理 HTTP 请求的对象。它支持同步和异步请求，但现代开发通常使用异步请求。

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

// 配置请求方法和 URL (这里是 GET 请求)
xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求完成后的回调函数
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log('成功获取数据:', xhr.responseText);
    } else {
        console.log('请求失败，状态码:', xhr.status);
    }
};

// 处理请求错误
xhr.onerror = function() {
    console.log('请求出现错误');
};

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

2. 使用 fetch API 进行异步请求

fetch 是 JavaScript 中更现代的异步请求方法，相比 XMLHttpRequest 更简单易用，并且基于 Promises，因此可以方便地使用 then 和 catch 来处理响应。

fetch('https://api.example.com/data')
    .then(response => {
        // 检查请求是否成功
        if (!response.ok) {
            throw new Error('请求失败');
        }
        return response.json();  // 将响应解析为 JSON
    })
    .then(data => {
        console.log('成功获取数据:', data);
    })
    .catch(error => {
        console.log('请求出错:', error);
    });

代码解释:

fetch(‘URL’)：发送请求并返回一个 Promise 对象。
response.ok：检查 HTTP 状态码，状态码在 200-299 之间表示请求成功。
response.json()：将响应解析为 JSON 格式的数据。
then(data => {…})：处理解析后的数据。
catch(error => {…})：处理请求或解析过程中的错误

3. 使用 async/await 语法简化异步请求

async/await 是 Promise 的语法糖，可以让异步代码看起来像同步代码一样。

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('请求失败');
        }
        const data = await response.json();
        console.log('成功获取数据:', data);
    } catch (error) {
        console.log('请求出错:', error);
    }
}

fetchData();

代码解释：