JS async / await tasks queue

In my JS app I’m using the async / await feature. I would like to perform multiple API calls and would like them to be fired one after other. In other words I would like to replace this simple method:

const addTask = async (url, options) => {
    return await fetch(url, options)
}

with something more complex.. like:

let tasksQueue = []
const addTask = async (url, options) => {
    tasksQueue.push({url, options})
    ...// perform fetch in queue
    return await ...
}

What will be the best way to handle the asynchronous returns?

Answer

You could save previous pending promise, await for it before calling next fetch.

// fake fetch for demo purposes only
const fetch = (url, options) => new Promise(resolve => setTimeout(resolve, 1000, {url, options}))

// task executor
const addTask = (() => {
  let pending = Promise.resolve();
  
  const run = async (url, options) => {
    try {
      await pending;
    } finally {
      return fetch(url, options);
    }
  }

  // update pending promise so that next task could await for it
  return (url, options) => (pending = run(url, options))
})();

addTask('url1', {options: 1}).then(console.log)

addTask('url2', {options: 2}).then(console.log)

addTask('url3', {options: 3}).then(console.log)