JavaScript 如何调用 Web API？

Posted 2023-03-31

【中文标题】JavaScript 如何调用 Web API？

【英文标题】：How does JavaScript call web APIs?

【发布时间】：2021-01-07 05:51:56

【问题描述】：

据我所知， 当我像 setTimeout 一样调用 Web API 4 次时，javascript 的正常行为：

它应该调用第一个函数然后将其添加到队列中等待调用堆栈为空.. 重复它会对所有其他 api 执行相同的操作.. 所以第二个函数应该等到第一个函数执行然后开始被调用 .. 这意味着 第二个函数应该花费 2 秒或更长时间，然后 第三个函数应该花费 3 秒或更长时间 ...等等。 ..

---

我错过了什么！？

【问题讨论】：

您正在立即设置所有超时，并且它们都会在 1 秒后解决。使用 setTimeout 在超时完成之前不会阻塞。

下次尝试把代码放在这里而不是截图

【参考方案1】：

注意：由于我无法添加评论，因此我发布了此答案。

const sleep = (timeout) => 
    return new Promise((resolve, reject) => 
        setTimeout(() => 
            // perform some task here
            resolve(true);
        , timeout);
    );
;

async () => 
    // in asynchronous function
    await sleep(1000);
    // do something after code returns
;
// in global scope or synchronous
sleep(1000).then(() => 
    // callback
);

【参考方案2】：

尝试使用异步等待并等待每个操作完成。

const sleep = (ms) => new Promise(e => setTimeout(e, ms));

const logSeconds = async () => 
  await sleep(1000);
  console.log(new Date().toLocaleTimeString());


const main = async () => 
  await logSeconds();
  await logSeconds();
  await logSeconds();


main()

【参考方案3】：

var TimeOutOnTimeOut = () => 
   setTimeout(() => 
       console.log("Like this!");
       TimeOutOnTimeOut();
    , 3000);
;
    
TimeOutOnTimeOut();

他们会同时调用，但是你可以在第一个完成后调用下一个。