Question

实时输出流链接：https://wunder-provider.herokuapp.com/

我上面有一个实时输出流，它每3到15秒生成一次随机用户信息。我正在创建一个React Native应用程序，该应用程序将这些用户及其信息显示在屏幕上。

我的问题是从该输出流中获取数据。

当我尝试获取方法时，它将返回此错误。

  componentWillMount() {
    fetch("https://wunder-provider.herokuapp.com/")
      .then(res => res.json())
      .then(res => console.log(JSON.stringify(res)))
  }

错误：

Possible Unhandled Promise Rejection (id: 0):
SyntaxError: Unexpected token < in JSON at position 0
SyntaxError: Unexpected token < in JSON at position 0
    at parse (<anonymous>)
    at tryCallOne (blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:3747:14)
    at blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:3848:17
    at blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:28372:21
    at _callTimer (blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:28261:9)
    at _callImmediatesPass (blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:28297:9)
    at Object.callImmediates (blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:28516:14)
    at MessageQueue.__callImmediates (blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:3149:16)
    at blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:2970:18
    at MessageQueue.__guard (blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:3132:13)

如何从该来源获取数据并添加到我的状态？

已解决！

  constructor(props) {
    super(props);

    this.state = {
      users: []
    };

    const ws = new WebSocket(
      "wss://wunder-provider.herokuapp.com/socket.io/?EIO=3&transport=websocket"
    );

    ws.onopen = () => {
      console.log("Opened.");
    };

    ws.onmessage = msg => {
      if (msg.data.substr(0, 2) === "42") {
        const stringToBeParsed = msg.data.substr(2);
        const obj = JSON.parse(stringToBeParsed);
        this.setState({ users: [...this.state.users, obj[1].results[0]] });
      }
    };
  }

Answer 1

您正在尝试将HTML解析为JSON。您所请求的网址正在提供HTML页面。您可以通过添加console.log(res)来验证。输出将是HTML。

Unexpected token <错误是<html>标记

Answer 2

您不能在react-native的componentWillMount周期上调用提取语句，因此将其移出


constructor() {
  super()
  this.initBinds();
}

initBinds() {
  this.fetchData = this.fetchData.bind(this);
}

componentWillMount() {
   // or -->>
   // await this.fetchData();
   this.fetchData();
}

async fetchData() {
  await fetch("https://wunder-provider.herokuapp.com/")
        .then((response) => {
          return response.json()
        })
        .then((resource) => {
          console.log('resource', resource);
        })
}

Answer 3

发布的答案表明您正在尝试将HTML解析为JSON是正确的。如果您在“ https://wunder-provider.herokuapp.com/”中打开“开发人员工具”并打开“网络”标签，则可以看到请求。

其中一个请求https://wunder-provider.herokuapp.com/具有HTML作为其响应正文。这意味着，当您对该网址执行抓取功能时，就会收到HTML。

此外，如果我们仔细研究这些请求，尤其是您应该感兴趣的一个请求，那就是对 wss：//wunder-provider.herokuapp.com/ 的请求。 strong> URL。您可以做的是在React Native应用程序和服务器之间创建一个websocket连接，并订阅“ userList”通道。

如何使用JavaScript从实时输出流中获取数据

3 个答案: