讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript的Fetch API如何使用?【教程】

云枫酱_3125

云枫酱_3125

发布时间:2026-01-17 17:26:02

|

342人浏览过

|

来源于php中文网

原创

Fetch API 是基于 Promise 的原生网络请求接口,其 Promise 不因 HTTP 错误状态码 reject,需手动检查 response.ok;response.body 方法(如 json/text/blob)只能调用一次;POST 需显式设置 Content-Type 和 body 格式;跨域需合理配置 credentials 和 mode。

javascript的fetch api如何使用?【教程】

Fetch API 不是封装好的“请求工具”,它是一套基于 Promise 的原生网络请求接口,用法直接但细节多,稍不注意就会卡在 response.body 读取、错误处理或跨域上。

fetch() 返回的 Promise 永远不会因 HTTP 状态码 reject

这是最常踩的坑:即使服务器返回 404 或 500,fetch() 依然 resolve。必须手动检查 response.ok 或 response.status。

  • response.ok 是布尔值,等价于 response.status >= 200 && response.status
  • 如果只依赖 catch,404 错误根本进不去,后续 response.json() 可能因空响应体抛出 SyntaxError
  • 建议结构:
    fetch('/api/data')
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error: ${response.status}`);
        }
        return response.json();
      })
      .then(data => console.log(data))
      .catch(err => console.error('Request failed:', err));

如何正确读取 response body(json/text/blob)

response.json()、response.text()、response.blob() 都是返回 Promise 的方法,且每个只能调用一次 —— body 流一旦被读取就消耗完毕。

  • 不能同时写 response.json() 和 response.text(),后者会 pending 或报错 TypeError: Failed to execute 'text' on 'Response': body stream is locked
  • 上传文件后想读取服务端返回的 JSON?确保后端确实返回了可解析的 JSON,且 Content-Type 正确,否则 response.json() 仍会 reject
  • 需要原始字节或二进制?用 response.arrayBuffer() 或 response.blob(),别硬转 json

POST 请求必须显式设置 Content-Type 和 body 格式

fetch 默认不带 Content-Type 请求头,且 body 必须是字符串、FormData、Blob 或 URLSearchParams,不能直接传对象。

Json Schema Toolkit
Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据,从示例 JSON 生成 schema,并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

立即学习“Java免费学习笔记(深入)”;

  • 发 JSON:要手动加 headers: { 'Content-Type': 'application/json' },且 body: JSON.stringify({ a: 1 })
  • 发表单数据:用 new URLSearchParams({ a: '1', b: '2' })(自动设 Content-Type: application/x-www-form-urlencoded)
  • 传文件:必须用 FormData,它会自动生成正确的 Content-Type: multipart/form-data; boundary=...,别试图手动拼

credentials 和 mode 对跨域和 Cookie 的影响

默认情况下 fetch 不发送 Cookie,也不接受跨域响应中的 Cookie,除非显式配置。

  • credentials: 'include':带上 Cookie,且要求服务端响应头含 Access-Control-Allow-Origin(不能是 *)和 Access-Control-Allow-Credentials: true
  • mode: 'cors'(默认):走 CORS 协商;mode: 'no-cors' 会限制响应可读字段(只能读 status、ok、type),基本无法用
  • 同源请求无需配 credentials,但若后端用了 SameSite=Lax/Strict,仍可能因上下文丢失 Cookie

真正麻烦的是组合场景:比如登录后带 token 的请求要 credentials: 'include',而上传图片到第三方 CDN 又得 mode: 'cors' 且不带认证头 —— 这些细节不提前对齐后端策略,前端很容易反复调试 401 或 CORS 报错。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

1995

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2822

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

976

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3179

2025.09.10

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

11139

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

966

2023.11.23

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

744

2024.02.23

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

1826

2025.08.19

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

0

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn