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 监听事件流
连接特性 请求-响应后立即关闭 长连接,服务器可持续推送
相关推荐
beelan3 分钟前
v-on的思考
前端
山河木马6 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502196 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平11 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
李大玄13 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵13 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾19 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove25 分钟前
常见 npm 报错问题
前端·npm
sunbyte26 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子27 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试