获取数据，查询参数不起作用

Question

问题

我使用的是Lichess API，在用户的Get导出游戏中，查询参数max是整数类型的，可以设置为>= 1。

在下面的代码片段中，我无法在max大于1的情况下获取数据，但它适用于max=1。它也不适用于这个相同的JSFiddle，也不适用于我的VsCode项目。只有当我将查询max设置为值1时，它们才能工作。

​

new Vue({
  el: "#app",
  data: {
    temp: 1
  },
  methods: {
    async fetchData() {
        const response = await fetch(
         `https://lichess.org/api/games/user/Thibault?max=2&rated=false`, 
         {headers:{
            Accept:'application/x-ndjson'
          }}
      );
      const data = await response.json();
      console.log(data);
    },
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <button @click="fetchData()"> fetch data</button>
</div>

​

我试过的东西

我尝试过使用async await，并删除了它们，但没有成功，我尝试在网上搜索解决方案并彻底阅读API文档，但它只是不起作用。

Network说content-type是x-ndjson，所以我在application/x-ndjson标记中设置了application/x-ndjson(解决了我之前遇到的第一个问题)。

有人知道这是怎么回事吗？

Answer 1

未来的数据格式是恩杰森，Lichess API提供了一个帮助读取NDJSON流响应的效用函数。

如果使用此方法，您将得到以下数据：

new Vue({
  el: "#app",
  data: {
    temp: 1
  },
  methods: {
    async fetchData() {
      const response = await fetch(
         `https://lichess.org/api/games/user/Thibault?max=2&rated=false`, 
         {headers:{
            Accept:'application/x-ndjson'
          }}
      ).then(readStream(onMessage))
       .then(onComplete);

      console.log(arr);
    },
  }
})

const readStream = processLine => response => {
  const stream = response.body.getReader();
  const matcher = /\r?\n/;
  const decoder = new TextDecoder();
  let buf = '';

  const loop = () =>
    stream.read().then(({ done, value }) => {
      if (done) {
        if (buf.length > 0) processLine(JSON.parse(buf));
      } else {
        const chunk = decoder.decode(value, {
          stream: true
        });
        buf += chunk;

        const parts = buf.split(matcher);
        buf = parts.pop();
        for (const i of parts.filter(p => p)) processLine(JSON.parse(i));
        return loop();
      }
    });

  return loop();
}
const arr = [];
const onMessage = obj => arr.push(obj);
const onComplete = () => console.log('The stream has completed');