事件源获取不返回数据

Question

下面是服务的代码

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

export const AlertFetchEventSource = () => {
  fetchEventSource('https://puppygifs.tumblr.com/api/read/json'),
    {
      onmessage(ev) {
        const data = JSON.parse(ev.data);
        return data;
      },
    };
};

export default { AlertFetchEventSource };

index.tsx 我正在调用此服务但它没有返回任何数据

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import backendService from './services/backendService';

interface AppProps {}
interface AppState {
  name: string;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React',
    };
    console.log(backendService.AlertFetchEventSource());
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>Start editing to see some magic happen :)</p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 1

鉴于您正在使用的库是一个事件处理程序，它实际上并没有 return 数据。您需要为其提供一个回调，以便在它接收到事件时执行。

// you might want to specify a better type than `any`
type MessageHandler = (data: any) => void;

export const AlertFetchEventSource = (onEvent: MessageHandler) => {
  fetchEventSource('https://puppygifs.tumblr.com/api/read/json'), {
    onmessage(ev) {
      const data = JSON.parse(ev.data);
      onEvent(data);
    },
  }); // you had a typo here, missing ")"
};

并像

一样使用它

import { AlertFetchEventSource } from "./services/backendService";

// snip

AlertFetchEventSource(data => {
  // handle event data, eg
  console.log(data);

  // or perhaps something like
  this.setState(data);
});

事件源获取不返回数据

Event Source Fetch not returning Data

javascript

backend

typescript

reactjs