使用 JavaScript 发起请求

🎯 引言

学完这篇文章，你将能够理解浏览器是如何发起网络请求的，掌握通过浏览器地址栏、表单提交以及 JavaScript 代码（包括 XMLHttpRequest 和 fetch）发送请求的核心方法。你还能学会如何查看请求详情、设置请求头、传递 JSON 数据，以及使用现代异步编程方式处理请求结果。这对于前端小白入门网络请求非常有帮助！

🌐 浏览器发起请求的方式

浏览器和服务器之间的通信，离不开 HTTP 请求。了解浏览器发起请求的方式，是理解网络交互的基础。

浏览器输入 URL 实现原理

当你在浏览器地址栏输入一个网址，比如 https://example.com，浏览器会做哪些事情呢？这其实是一个完整的请求流程：

• 浏览器首先解析你输入的 URL，拆解出协议（HTTP/HTTPS）、域名、端口（默认 80 或 443）和路径。
• 浏览器查找 DNS 服务器，将域名解析成对应的 IP 地址。
• 浏览器与服务器建立 TCP 连接（HTTPS 还会额外做 TLS 握手）。
• 浏览器构造一个 HTTP 请求报文，默认是 GET 请求。
• 请求发送到服务器，服务器响应数据。

这整个过程支持你访问网页资源。可以把它想象成你给快递公司下了一个取件请求，先告诉他们地址（域名解析），准备好包裹（请求），等待快递员送来回复（服务器响应）。

使用地址栏发 GET 请求

地址栏发起的请求，默认都是 GET 请求。

这意味着浏览器把 URL 里的参数作为查询字符串直接发送给服务器。举个例子：

https://example.com/search?q=javascript

这里浏览器会向服务器发送请求，服务器获取 q=javascript，返回对应内容。

表单提交实现 POST 请求

HTML 表单是用户与服务器交互的重要手段。表单通过设置 method="post" 可以发送 POST 请求。

示例表单：

<form action="/submit" method="post">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>

当点击按钮时，浏览器会把表单数据序列化（默认是 application/x-www-form-urlencoded 格式），放在请求体里，发送给服务器。

POST 请求适合提交数据、上传文件等场景。

🎨 使用浏览器开发者工具查看请求（Network 面板）

网络请求细节可以通过浏览器自带的开发者工具查看。

打开方式通常是：

• Windows/Linux：按 F12 或 Ctrl + Shift + I
• Mac：按 Cmd + Option + I

切换到 Network（网络） 面板，你就能看到当前页面发出的所有请求列表。你可以点击具体请求，查看：

• 请求头（Headers）
• 请求体（Payload）
• 响应数据（Response）
• 时间信息（Timing）

这是调试请求问题和学习请求细节的最佳方式。

💻 使用 JavaScript 发起请求

现代前端开发离不开 JavaScript 发起请求，动态获取数据渲染页面。

XMLHttpRequest 基本用法

XMLHttpRequest（简称 XHR）是最早支持的网页异步请求对象。

基础示例 - GET 请求：

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log('响应数据:', xhr.responseText);
        } else {
            console.error('请求失败，状态码:', xhr.status);
        }
    }
};

xhr.send();

上面代码解释：

• open 设置请求方法和地址
• 通过回调函数监听状态变化
• 状态码 200 表示成功，拿到响应文本

使用 fetch() 发送 GET / POST 请求

fetch 是现代浏览器提供的请求接口，基于 Promise，写法更简洁。

GET 请求示例：

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        if (!response.ok) {
            throw new Error('网络响应失败');
        }
        return response.json();
    })
    .then(data => {
        console.log('获取的数据:', data);
    })
    .catch(error => {
        console.error('请求错误:', error);
    });

POST 请求示例，带 JSON 数据：

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        title: 'foo',
        body: 'bar',
        userId: 1,
    }),
})
    .then(response => response.json())
    .then(data => console.log('服务器响应:', data))
    .catch(error => console.error('请求失败:', error));

设置请求头与传递 JSON 数据

发送 JSON 数据时，必须设置请求头 Content-Type 为 application/json，并将 JS 对象转换成 JSON 字符串。

const data = { name: '张三', age: 25 };

fetch('/api/user', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
});

如果你不设置正确的 Content-Type，服务器可能无法正确解析请求体。

使用 async/await 编写异步请求

async/await 让异步代码写起来更像同步，结构更清晰。

示例 GET 请求：

async function fetchUser() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
        if (!response.ok) {
            throw new Error('请求失败，状态码：' + response.status);
        }
        const user = await response.json();
        console.log('用户信息:', user);
    } catch (error) {
        console.error('请求出错:', error);
    }
}

fetchUser();

错误与异常处理（try/catch）

在异步请求中，网络异常、服务器错误都可能发生，使用 try/catch 捕获异常是最佳实践。

无论是 fetch 还是 async/await，都要记得处理异常，避免页面崩溃或无响应。

提示

• 浏览器地址栏直接敲 URL 是最直观的 GET 请求示例。
• 表单提交 POST 请求时，数据格式有限，JavaScript 发请求更灵活。
• 新手推荐先用 fetch + async/await，写法简洁，易于理解。
• 使用开发者工具 Network 面板是调试请求的利器。

🧾 小节总结

• 浏览器发起请求包括地址栏输入 GET 请求和表单提交 POST 请求两种常见方式。
• JavaScript 提供 XMLHttpRequest 和 fetch 两个主要接口发起请求，fetch 更现代、简洁。
• 发起请求时要注意设置请求头，传递 JSON 数据，并使用 try/catch 处理异常。

❓ 知识问答（Q&A）

Q：浏览器地址栏输入的网址默认发送什么请求？

A：默认发送 GET 请求，用于获取资源。

Q：如何使用 JavaScript 发送 POST 请求并传递 JSON 数据？

A：使用 fetch，设置 method: 'POST'，添加请求头 'Content-Type': 'application/json'，并将数据 JSON.stringify() 后放入 body。

Q：为什么要使用 try/catch 包裹异步请求代码？

A：为了捕获网络异常和请求失败，防止程序崩溃，提高用户体验。

🧪 小练习

练习 1：使用 fetch 写一个函数，向 https://jsonplaceholder.typicode.com/posts 发送一个 POST 请求，提交一篇文章（title 和 body），并打印服务器返回的数据。

async function createPost() {
    // 在这里写你的代码
}
createPost();

练习 2：使用 XMLHttpRequest 发送一个 GET 请求，获取 https://jsonplaceholder.typicode.com/users/1 用户信息，并将结果打印到控制台。

function getUser() {
    // 在这里写你的代码
}
getUser();

🎉 恭喜你已经掌握 浏览器请求原理、JavaScript 异步请求、fetch 用法 三大技能啦！祝你前端学习之路越走越顺！