sse fetch-event-source插件的使用

加油鸭老王

已于 2024-09-04 17:38:24 修改

阅读量843

点赞数 3

分类专栏：工具文章标签：前端

于 2024-09-04 15:56:29 首次发布

本文链接：https://blog.csdn.net/weixin_42400404/article/details/141896061

版权

工具专栏收录该内容

7 篇文章

订阅专栏

sse简单介绍https://blog.csdn.net/weixin_42400404/article/details/141895877?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22141895877%22%2C%22source%22%3A%22weixin_42400404%22%7D

fetch-event-source gitHub地址

通信流程

1.安装

pnpm install @microsoft/fetch-event-source

该软件包支持Fetch-api中的所有功能

2.vue单文件使用

import { fetchEventSource } from '@microsoft/fetch-event-source';

await fetchEventSource('/api/sse', {
    onmessage(ev) {
        console.log(ev.data);
        // 把接口返回的json文件转换一下
    }
});

3.参数

你可以传入默认fetch API公开的所有其他参数

const ctrl = new AbortController();
fetchEventSource('/api/sse', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        foo: 'bar'
    }),
    signal: ctrl.signal,
});