javascript如何与后端API进行通信？_如何使用fetch或axios发起网络请求？【教程】

fetch GET 请求需检查 response.ok 并手动解析响应体，POST 需设置 Content-Type 且 body 要 JSON.stringify；axios 默认处理错误状态码和自动序列化，fetch 需手动处理；跨域需确认后端 CORS 配置，尤其带 credentials 时 Access-Control-Allow-Origin 不能为通配符。

fetch 基本用法：GET 请求怎么写才不报错？fetch 默认只发 GET，但容易忽略两点：一是它**不会自动抛出 HTTP 错误状态码（如 404、500）**，二是**响应体需要手动解析**。直接 await fetch(url) 返回的是 Response 对象，不是 JSON 数据。

• 必须显式调用 response.json() 或 response.text() 才能读取内容
• 要检查 response.ok（即 status 在 200–299 之间），否则错误响应会静默通过
• 不带选项时，fetch 不发送 cookies，需加 { credentials: 'include' } 才能传 session

示例：

fetch('/api/users')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

POST 请求怎么传 JSON 数据？ 发 POST 时，常见错误是漏掉 Content-Type 头或没序列化 body：

• body 必须是字符串，所以要用 JSON.stringify(data)
• 必须设置 headers: { 'Content-Type': 'application/json' }，否则后端可能收不到或解析失败
• 如果后端用 form-data，就不能用 JSON，得改用 FormData 实例

示例：

fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'a@b.c', password: '123' })
});

axios 和 fetch 的关键区别在哪？axios 是第三方库，fetch 是浏览器原生 API。它们行为差异直接影响调试体验：

• axios 默认把 4xx/5xx 状态码转为 rejected Promise，fetch 不会
• axios 自动序列化 JS 对象为 JSON（如果 Content-Type 是 application/json），fetch 需手动 JSON.stringify
• axios 支持请求/响应拦截器，适合统一加 token、处理错误；fetch 得靠封装函数模拟
• axios 在 IE11 中需要 polyfill，fetch 同样需要（但 axios 内置了更平滑的降级逻辑）

简单封装一个带错误处理的 fetch 函数比引入 axios 更轻量，但项目中已有 axios 就别重复造轮子。

跨域请求失败时该看哪几处？ CORS 报错（如 No 'Access-Control-Allow-Origin' header）不是前端代码问题，但前端要确认三件事：

• 请求 URL 是否确实跨域（协议、域名、端口任一不同即跨域）
• 前端是否在 fetch 中加了 mode: 'cors'（默认就是，一般不用显式写）
• 如果带认证信息（cookies 或 Authorization header），后端必须返回 Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin *不能是通配符 **，必须指定具体域名

开发时后端未配 CORS，最快速验证方式是临时用代理（如 vite 的 server.proxy 或 webpack devServer 的 proxy），而不是关浏览器安全策略。

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

真正难调的往往不是语法，而是后端返回的 s

# 浏览器  # app  # word  # js  # json  # javascript  # java  # access  # 前端  # 封装  # cookie  # include  # vite  # webpack 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】