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

Question

问题

我正在使用 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，所以我在我的 header 标签中设置了 application/x-ndjson（解决了我之前遇到的另一个第一个问题）。

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

Answer 1

即将到来的数据格式是 nd-json and Lichess API offers a utility function 以帮助读取 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');

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

Vue fetching data ,query parameter not working

fetch

vue.js

fetch-api

lichess

问题

我尝试过的东西