Run JS functions in parallel awiting one of them

Question

So i have a main function that calls two other functions, one of witch i have to await for result, so each funtion needs to be called separatly as they are trigered in different parts of the code, but test1 funct can run in parallel and i don't need the result, but test2 needs to provide a result.

I like for both functions to run in parallel..

this is my code so far.. cant get the two request to happen in parallel.

function test1() { yourUrl = 'http://www.google.com/' var xhr = new XMLHttpRequest(); xhr.open("POST", yourUrl, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function(e) { console.log('get pedido') } xhr.send() } async function test2() { yourUrl = 'http://www.google.com' var xhr = new XMLHttpRequest(); xhr.open("POST", yourUrl, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function(e) { console.log('get precio') } xhr.send() return true } async function main() { test1() await test2() } main()

JS is single threaded so they won't technically be happening in parallel. But looking at your code, definitely second request is fired before first is completed. Are you sure you are checking correctly? — Tushar Shahi
– Tushar Shahi, Commented Nov 9, 2022 at 17:47
test2 doesn't wait for the AJAX request to complete before it returns. So there's no point in using async/await. You need an explicit Promise that gets resolved in the onload function. — Barmar
– Barmar, Commented Nov 9, 2022 at 17:58

Barmar · Accepted Answer · 2022-11-09 18:06:06Z

Your AJAX requests are already being sent concurrently, I don't think that's your actual problem.

If you want test2 to wait for the response before it returns, you need to use a Promise.

function test2() { return new Promise((resolve) => { yourUrl = 'http://www.google.com' var xhr = new XMLHttpRequest(); xhr.open("POST", yourUrl, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function(e) { console.log('get precio'); resolve(true); } xhr.send() } }) }

You can simplify and modernize the code by using fetch(), which returns a promise.

async function test2() { yourUrl = 'http://www.google.com' await fetch(yourUrl, { method: 'POST', headers: { 'Content-type': 'application/json' } }); console.log('get precio'); return true; }

Mustafa Poya · Accepted Answer · 2022-11-13 04:43:37Z

If you need to execute both at the same time you could use fetch instead of xhr, if xhr is required to use you could create a promise based on xhr

function getData(yourUrl, method="POST"){ return new Promise((resolve, reject) => var xhr = new XMLHttpRequest(); xhr.open(method, yourUrl, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function(e) { console.log('get pedido') resolve() //PASS DATA TO NEXT .then } xhr.send() ) } function test1(){ yourUrl = 'http://www.google.com/' return getData(yourUrl) } function test2(){ yourUrl = 'http://www.google.com/' return getData(yourUrl) } function main(){ Promise.all([test1,test2]) .then(res => console.log(res[0], res[1]) } //EASIER SOLUTION function test1(){ const yourUrl = 'http://www.google.com/'; return fetch(yourUrl) .then(res => res.json()) // if plain text res.text() } function test2(){ const yourUrl = 'http://www.google.com' return fetch(yourUrl) .then(res => res.json()) // if plain text res.text() } function main(){ Promise.all([test1,test2]) .then(res => console.log(res[0], res[1]) }

You could create as well your own promises and use Promise.all, Promise.all will execute and return both responses

Just to complete my answer, requests should be happening already asynchronously in xhr, if you need test1 to execute first use a callback if promise isnt possible

Collectives™ on Stack Overflow

Run JS functions in parallel awiting one of them

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related