如何用Javascript发起网络请求？-js教程-PHP中文网

如何用Javascript发起网络请求？

幻影之瞳

发布： 2025-12-16 22:29:02

原创

932人浏览过

最常用、最推荐的JavaScript网络请求方式是fetch() API。它基于Promise、原生支持、简洁高效；支持GET/POST等方法，需手动处理HTTP错误和凭证配置；相比XMLHttpRequest更现代，推荐新项目使用。

如何用javascript发起网络请求？

用 JavaScript 发起网络请求，最常用、最推荐的方式是使用 fetch() API。它简洁、基于 Promise、原生支持，无需额外库。

基础用法：GET 请求

发起一个简单的 GET 请求，获取 JSON 数据：

调用 fetch(url)，返回一个 Promise
用 .then() 处理响应，注意 response.json() 也返回 Promise
记得用 .catch() 捕获网络错误（注意：404、500 等 HTTP 错误不会进 catch，需手动检查 response.ok）

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求失败:', err));

发送 POST 请求（带数据）

提交表单或调用接口时常用 POST。关键点：

设置 method: 'POST'
用 headers 声明内容类型，如 'Content-Type': 'application/json'
用 body 传数据，JSON 需先 JSON.stringify()

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: '我的标题',
    body: '我的内容',
    userId: 1
  })
})
  .then(res => res.json())
  .then(console.log);

处理 Cookie 和认证（如登录态）

默认 fetch 不发送 Cookie，跨域时也不携带凭证。需要显式配置：

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

525

查看详情

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

同域请求加 credentials: 'same-origin' 可发 Cookie
跨域请求需同时设 credentials: 'include'，且服务端必须允许（CORS 响应头含 Access-Control-Allow-Credentials: true）
带 Token 认证？直接在 headers 里加 Authorization