知道有多少 promise 待处理

Question

我的问题如下：

我有一个 ID 数组，我需要使用对我的 API 的 HTTP 请求映射到一些数据库 ID，例如 HTTP GET /foo/{id}

我需要等待所有值在我的应用程序中显示数据

我目前正在执行以下操作

async getValuesByIds({}, ids){
    const valuesPromise = ids.map(async (id) => this.$axios.$get(`/foo/${id}`))
    return Promise.all(valuesPromise)
}

并且在打印值之前的代码中：

this.loading = true
this.getLeadsValuesByIds(idsArray).then(data => {
        this.loading = false
        this.values = data
})

代码运行良好，但如果我有很多 ID，则运行需要一些时间。

一般来说，第一个请求在 0.5 秒左右结束，根据请求的数量，最后一个请求可能会长达 4 到 5 秒

我的目标是显示加载文本，告知用户还剩多少请求以及已完成多少请求。

这是一个使用 jsonPlaceHolder 的简短示例 API。

基本上我想要的是 loading.. 剩下的请求数（比如 {n} / 99 loaded

const loadData = () => {
  const ids = Array.from({length: 99}, (_, i) => i + 1)


  updateDataText('loading....')
  const dataPromise = ids.map(async(id) => {
    const post = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
    return post.data
  })

  Promise.all(dataPromise).then(res => {
      updateDataText(JSON.stringify(res))
  })
}

const updateDataText = (text) => {
  const div = document.getElementById('dataText')
  div.innerText = text
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>

<button onclick="loadData()">LoadData</button>

<p id="dataText"></p>

注意 : 我正在使用 Nuxt，我不知道这是否改变了什么。

Answer 1

您可以使用这样的 <progress> 标签

如果您愿意，我还添加了机上和完成柜台

const loadData = () => {
  const ids = Array.from({length: 99}, (_, i) => i + 1)
  let nStarted = 0, nFinished=0;
  const inflight = document.getElementById('inflight');
  const finished = document.getElementById('finished');
  const progress = document.getElementById('progress');
  progress.max = ids.length;

  updateDataText('loading....')
  const dataPromise = ids.map(async(id) => {
    nStarted++;
    inflight.textContent = nStarted - nFinished;
    const post = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
    progress.value++;
    nFinished++;
    finished.textContent = nFinished;
    inflight.textContent = nStarted - nFinished;
    return post.data
  })

  Promise.all(dataPromise).then(res => {
    updateDataText(JSON.stringify(res, null, 4))
  })
}

const updateDataText = (text) => {
  const div = document.getElementById('dataText')
  div.innerText = text
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>

<button onclick="loadData()">LoadData</button>
<progress id="progress" value=0></progress>
<div>In Flight: <span id="inflight"></span></span>
<div>Finished: <span id="finished"></span></span>
<pre id="dataText"></pre>

知道有多少 promise 待处理

Know how many promise are pending

javascript

promise