1. fetch 是什么fetch是浏览器内置的网络请求 API用于获取数据、提交数据或下载资源无需安装第三方库。它返回 Promise通常配合await使用constresponseawaitfetch(/api/users);这里的response是响应对象不是最终的业务数据。读取 JSON 需要继续调用constusersawaitresponse.json();需要注意HTTP404、500不会让 fetch 自动抛出异常要主动检查response.ok网络失败、取消等情况才会使请求 Promise 失败。2. credentials控制身份凭据主要可以理解为控制请求是否携带 Cookie 登录信息也影响浏览器是否接受响应中的Set-Cookie。取值同源请求跨域请求omit不携带凭据不携带凭据same-origin默认携带符合条件的凭据不携带凭据include允许携带凭据允许携带凭据同源指协议、域名、端口都相同。include并不保证跨域 Cookie 一定被发送仍受 Cookie 策略限制跨域读取响应也需要正确的 CORS 配置。你的credentials: omit适合不依赖 Cookie 登录态的公共 Schema 请求但它不能绕过跨域限制。它不会删除手动设置的Authorization请求头。如果接口需要登录 Cookie使用它可能导致鉴权失败。3. signal取消请求和设置超时signal:AbortSignal.timeout(30000)表示创建一个约 30 秒后触发的取消信号并让 fetch 监听它。单位是毫秒。作用是限制等待时间避免接口卡住时页面一直加载。超时信号也会影响尚未完成的响应内容读取并不是拿到响应头后就自动失效。它不会自动重试也不能保证服务器停止处理请求。因此订单提交等写操作超时后不能直接认定服务器没有执行。4. fetch 和 Axios 的区别对比项fetchAxios来源原生 API第三方库JSON 响应调用response.json()通常自动解析读取response.dataHTTP 错误手动检查response.ok默认非 2xx 状态抛错可配置超时使用取消信号提供timeout配置拦截器需要自己封装内置请求、响应拦截器跨域携带 Cookiecredentials: includewithCredentials: true注意Axios 的withCredentials: false不等于 fetch 的credentials: omit前者不会禁止同源请求携带 Cookie。业务选型上我建议普通增删改查接口优先使用项目统一封装的请求层Axios 通常比较方便。AI 流式响应、简单公共资源请求fetch 通常更直接。已有项目优先保持现有规范不必为了选型而更换。5. 示例try{constschemaResponseawaitfetch(schemaUrl,{credentials:omit,signal:AbortSignal.timeout(30000),});// HTTP 错误不会自动抛出需要主动检查if(!schemaResponse.ok){thrownewError(获取 Schema 失败${schemaResponse.status});}constschemaawaitschemaResponse.json();// 使用 schema}catch(error){if(error?.nameTimeoutError){console.error(获取 Schema 超时请稍后重试);}else{console.error(获取 Schema 失败,error);}}一句话记忆fetch负责发请求credentials决定是否带登录凭据signal控制何时取消response.ok检查 HTTP 是否成功response.json()读取 JSON 数据。
