有关 Javascript 的 event loop 和 async function，我始终没有弄明白。

就是这个异步函数到底是在立即执行（在后台另外一个线程中），然后把 callback 函数放到 event loop 的 task queue 中去，还是这个异步函数本身就被放到了 task queue 中去了,然后再下一次 event loop 中执行？

如果是前者，Javascript 不是单线程的么？还有其它的线程执行异步函数？

如果是后者，这个异步函数如果需要执行很长时间，比如 fetch 一个文件，那不是就会阻塞了 main thread ，页面就会卡住了？

比如：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
};

fetchData()
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error));

当 fetchData 被执行的时候，里面的fetch这个函数（异步函数），是被放到 backend thread 里面去执行了，然后它的 callback/then then(response => response.json()) 被会放 task queue 里面去？就是说除了 main thread ，还有很多其它 threads 了？（ chatGPT 是这么解释的，说 Web API 都是由浏览器在 backend 后面开 thread 执行，但我不知道它是不是又在胡说八道......) 如果这个 fetch 需要花很多时间，在下一次 event loop 循环到的时候，还没有运行完，那它的 callback/then 咋整？

所以，我这个 Javascript 的 event loop & async function 的关系犯迷糊了，绕不出来了。

Fetch API is a promose-based https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch