0

问题

我正在使用Lichess API，其中在Get Export games of a user下说明查询参数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 devtools 说content-type是 x-ndjson 所以我application/x-ndjson在我的header标签中设置了（解决我之前遇到的另一个第一个问题）。

有谁知道发生了什么？

4

1 回答 1

1

即将推出的数据格式是nd-json，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');
于 2021-09-20T04:35:25.660 回答