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?
Advertisement
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)