JavaScript Fetch API 的基本使用

JavaScript Fetch API 的基本使用

JavaScript 的 fetch() 可以向服务器发送 HTTP 请求并获取响应数据，常用于调用后端接口、获取 JSON 数据以及开发前后端交互功能。

发送 GET 请求

fetch("https://jsonplaceholder.typicode.com/users/1")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("请求失败：", error);
    });

这段代码会请求一个示例用户接口，并将返回的 JSON 数据转换成 JavaScript 对象。

使用 async/await

使用 async/await 可以让异步请求的代码更容易阅读：

async function getUser() {
    try {
        const response = await fetch(
            "https://jsonplaceholder.typicode.com/users/1"
        );

        if (!response.ok) {
            throw new Error(`HTTP 错误：${response.status}`);
        }

        const data = await response.json();
        console.log(data.name);
    } catch (error) {
        console.error("请求失败：", error);
    }
}

getUser();

注意事项

• fetch() 默认发送 GET 请求。

• HTTP 404、500 等错误状态通常不会自动触发 catch()，因此需要检查 response.ok。

• 跨域请求可能受到浏览器 CORS 安全策略限制。

Fetch API 是现代前端开发的重要工具，适合获取接口数据、提交表单以及开发各种 Web 应用。