Javascript等待Promises返回數據，然后分配onClick事件偵聽器對返回的數據執行操作

Question

（更新：我現在可以通過使用async / await來等待對諾言的解析來繪制數據，從而解決該問題。但是，現在，我面臨着如何停止a中的setInterval計時器的問題關閉。）

我要完成以下任務：

• 順序發送10個提取請求，並測量每個請求的響應時間（以毫秒為單位）
• 對於每個請求，將響應時間推送到數組
• 單擊開始按鈕時-使用預定義的函數開始繪制點： drawChart(data) 。 這些點應該每秒添加一次。
• 單擊停止按鈕時-停止繪圖。

onLoad事件偵聽器：

window.onload = async function () {
   drawChart([]);
   const data = await fetchData(15);
   document.getElementById("start").onclick = () => plotData(data);

   // I want to be able to clearInterval on click of Stop button... but its not working...
   document.getElementById("stop").onclick = clearInterval(plotData);  
};

繪圖/獲取功能：

const plotData = (data) => {
  let i = 0;
  // How do i clear this interval outside of this function?
  const interval = setInterval( () => {
    i++;
    if (i === data.length) { clearInterval(interval); }
    let newData = data.slice(0,i);
    drawChart(newData); 
    console.log('draw');
  }, 1000);
}

const fetchData = async (times) => {
  let url = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1295/lounging-dog.jpg`;
  const data = [];
  for (let i = 0; i < times; i++) {
    start = (new Date()).getTime();
    await fetch(url)
      .then( res => {
        end = (new Date()).getTime();
        console.log('times', i+1);
        console.log('response milisec', end - start);            
        data.push({ xVal: i+1, yVal: end-start}); 
      })
      .catch( e => console.log(e));   
  }
  return data;
};

我無法確定的是，當在回調中定義setInterval時，如何在窗口上下文中清除clearInterval。

您也可以查看我的CodePen以獲取更多信息。

提前致謝！

Answer 1

要等待諾言解決，請使用await

// get fetch call data
const data = await fetchData(10).then( (res) => {
  console.log(res);
});

// assign button onClick handler, data undefined
document.getElementById("start").onclick = drawChart(data);  

一種更好的方法是，創建每個承諾，然后等待所有承諾，而不是等待fetchData每個承諾解決之后再開始下一個提取。 它看起來像這樣：

 const fetchData = async (times) => { const url = 'https://reqres.in/api/users?page=2' const promises = []; for (let i = 0; i < times; i++) { start = (new Date()).getTime(); promises.push( fetch(url) .then( res => { end = (new Date()).getTime(); console.log('times', i+1); console.log('response milisec', end - start); return { xVal: i+1, yVal: end-start}; }) .catch( e => console.log(e)) ); } let data = await Promise.all(promises); console.log(data) return data; }; fetchData(3);