fetch二次封装

在进行接口请求时,为了减少重复代码的书写可以对fetch进行二次封装,要用的时候直接调就行了。

js 复制代码
async function http({method, url, params, data, headers = {}}) {
    // GET请求参数处理
    if (params) {
        url += '?' + new URLSearchParams(params).toString();
    }

    const options = {
        method,
        headers,
        credentials: 'include',  // 包含跨域凭据
        ...(data && {body: JSON.stringify(data)})  // 如果有data就添加body
    };

    const res = await fetch(url, options);

    // 错误处理
    if (!res.ok) {
        const errorData = await res.json().catch(() => ({}));
        throw new Error(`HTTP error! status: ${res.status}, message: ${errorData.message || '未知错误'}`);
    }

    // 特殊处理SSE响应
    if (res.headers.get('Content-Type')?.includes('text/event-stream')) {
        return res;
    }

    // 默认返回JSON
    return res.json();
}

二次封装详解

这段代码 ...(data && {body: JSON.stringify(data)}) 使用了几个JavaScript的高级特性,我来详细解释它的工作原理:

1. 逻辑与运算符(&&)的短路特性

data && {body: JSON.stringify(data)} 使用了逻辑与运算符的短路特性:

  • 如果 data 是假值(如 nullundefinedfalse0"" 等),整个表达式会返回 data 的值,且不会计算右边的表达式
  • 如果 data 是真值,则返回右边的对象 {body: JSON.stringify(data)}

2. 对象展开运算符(...)

... 是对象展开运算符,它会将对象的可枚举属性展开到新的对象中:

  • 如果 data 存在,data && {body: JSON.stringify(data)} 会返回一个对象,然后被展开到 options 对象中
  • 如果 data 不存在,表达式返回 data(假值),展开一个假值不会有任何效果

特殊处理SSE响应

js 复制代码
if (res.headers.get('Content-Type')?.includes('text/event-stream')) {
        return res;  // 直接返回原始响应对象,保留原始响应:让调用方自己处理流式数据(如通过 `EventSource` 或手动读取流)
}

1. 什么是SSE(Server-Sent Events)?​ ​ SSE 是一种服务器向客户端​​单向实时推送数据​​的技术,特点是:

  • 基于HTTP协议,使用简单的文本格式(text/event-stream
  • 服务器可以持续发送多条消息(如聊天消息、实时日志、股票价格更新)
  • 客户端通过 EventSource API 或直接处理原始响应流来监听消息

2. 为什么需要特殊处理SSE响应?​

​普通HTTP请求 vs SSE请求的区别​

特性 普通HTTP请求 SSE请求
响应类型 application/json等 text/event-stream
数据格式 一次性完整响应 持续流式文本(多条消息)
客户端处理方式 直接解析JSON 监听事件流
连接特性 请求-响应后立即关闭 长连接,服务器可持续推送
相关推荐
芒果1254 分钟前
【转载文章】ECharts-GL 实现世界级、国家级、省市级 3D 地图
前端
一只小风华~14 分钟前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰18 分钟前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
张元清19 分钟前
揭秘JS事件循环:一道字节跳动面试题带你深入理解async/await、Promise与RAF
前端·react.js·面试
KenXu23 分钟前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
北海几经夏28 分钟前
React组件中的this指向问题
前端·react.js
passer98141 分钟前
列表项切换时同步到可视区域
前端
FogLetter43 分钟前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元44 分钟前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api44 分钟前
Elasticsearch 查询性能优化:从 3 秒到 300ms 的 6 个核心参数调优指南
前端