We Keep Coding

Learning Promises, Async/Await to control execution order

I have been studying promises, await and async functions. While I was just in the stage of learning promises, I realized that the following: When I would send out two requests, there was no guarantee that they would come in the order that they are written in the code. Of course, with routing and packets of a network. When I ran the code below, the requests would resolve in no specific order.
const getCountry = async country => {
await fetch(`https://restcountries.com/v2/name/${country}`)
.then(res => res.json())
.then(data => {
console.log(data[0]);
})
.catch(err => err.message);
};
getCountry('portugal');
getCountry('ecuador');
At this point, I hadn't learned about async and await. So, the following code works the exact way I want it. Each request, waits until the other one is done.
Is this the most simple way to do it? Are there any redundancies that I could remove? I don't need a ton of alternate examples; unless I am doing something wrong.
await fetch(`https://restcountries.com/v2/name/${country}`)
.then(res => res.json())
.then(data => {
console.log(data[0]);
})
.catch(err => err.message);
};
const getCountryData = async function () {
await getCountry('portugal');
await getCountry('ecuador');
};
getCountryData();
Thanks in advance,

Yes, that's the correct way to do so. Do realize though that you're blocking each request so they run one at a time, causing inefficiency. As I mentioned, the beauty of JavaScript is its asynchronism, so take advantage of it. You can run all the requests almost concurrently, causing your requests to speed up drastically. Take this example:
// get results...
const getCountry = async country => {
const res = await fetch(`https://restcountries.com/v2/name/${country}`);
const json = res.json();
return json;
};
const getCountryData = async countries => {
const proms = countries.map(getCountry); // create an array of promises
const res = await Promise.all(proms); // wait for all promises to complete
// get the first value from the returned array
return res.map(r => r[0]);
};
// demo:
getCountryData(['portugal', 'ecuador']).then(console.log);
// it orders by the countries you ordered
getCountryData(['ecuador', 'portugal']).then(console.log);
// get lots of countries with speed
getCountryData(['mexico', 'china', 'france', 'germany', 'ecaudor']).then(console.log);
Edit: I just realized that Promise.all auto-orders the promises for you, so no need to add an extra sort function. Here's the sort fn anyways for reference if you take a different appoach:
myArr.sort((a, b) =>
(countries.indexOf(a.name.toLowerCase()) > countries.indexOf(b.name.toLowerCase())) ? 1 :
(countries.indexOf(a.name.toLowerCase()) < countries.indexOf(b.name.toLowerCase()))) ? -1 :
0
);

I tried it the way #deceze recommended and it works fine: I removed all of the .then and replaced them with await. A lot cleaner this way. Now I can use normal try and catch blocks.
// GET COUNTRIES IN ORDER
const getCountry = async country => {
try {
const status = await fetch(`https://restcountries.com/v2/name/${country}`);
const data = await status.json();
renderCountry(data[0]); // Data is here. Now Render HTML
} catch (err) {
console.log(err.name, err.message);
}
};
const getCountryData = async function () {
await getCountry('portugal');
await getCountry('Ecuador');
};
btn.addEventListener('click', function () {
getCountryData();
});
Thank you all.

How to make fetch promise resolve without using .then syntax?

First things first, I made sure to write a quick demo of the issue I'm talking about here https://codesandbox.io/s/exciting-swirles-7cs3s
But essentially, using the isomorphic-fetch library, I'm running into an issue where I can't really get the value, or you might say, resolution, of the fetch() function.
import fetch from "isomorphic-fetch";
async function test() {
return await fetch("https://google.com", { mode: "no-cors" });
}
let t = test();
console.log(t);
The outcome of which is
Now I've also considered the other way of using fetch() like this
fetch("https://google.com", { mode: "no-cors" })
.then(response => response.text())
.then(data => console.log(data));
which actually delivers a string, but I prefer doing it the first way, if possible? It's also very possible I'm not using fetch correctly.

Try it like this:
import fetch from "isomorphic-fetch";
async function test() {
const response = await fetch("https://google.com", { mode: "no-cors" });
return response.text();
}
async function main() {
let t = await test();
console.log(t);
}
main();
You need to await the promise, and that means you need an async function.

fetch will return a promise, not a string. In your second example you call .text() on it. You will have to do something similar in asyc/await

Use t.then(res => console.log(res)); it will return response object.
As you have async function test and you are not awaiting it like await test() so it will return promise.
As per your comment you should be using await test(). But you can only use await inside async so I suggest to use wrapper function like below.
import fetch from "isomorphic-fetch";
async function test() {
return await fetch("https://google.com", { mode: "no-cors" });
}
async function wrapper() {
let t = await test();
console.log(t.text());
}
wrapper();

Is it a good 'idea' to prevent nested promise with async / await?

I have some difficulties with a nested promise (below).
For now I'm using an async function in the catch to trigger authentication Errors.
But is it really a good way and isn't there a better way ?
The function have to send a POST request. If an authentication Error is thrown then login(), else throw the error.
If login() is fulfilled : retry the POST (and then return the results), else throw the error;
function getSomeData() {
return post('mySpecialMethod');
}
function login() {
const params = { /* some params */ }
return post('myLoginMethod', params).then(result => {
/* some processing */
return { success: true };
});
}
const loginError = [1, 101];
function post(method, params, isRetry) {
const options = /* hidden for brevity */;
return request(options)
// login and retry if authentication Error || throw the error
.catch(async ex => {
const err = ex.error.error || ex.error
if (loginError.includes(err.code) && !isRetry) { // prevent infinite loop if it's impossible to login -> don't retry if already retried
await login();
return post(method, params, true)
} else {
throw err;
}
})
// return result if no error
.then(data => {
// data from 'return request(options)' or 'return post(method, params, true)'
return data.result
});
}
Use
getSomeData.then(data => { /* do something with data */});

I'd suggest that for complex logic at least you use the async/await syntax.
Of course .then() etc is perfectly valid, however you will find the nesting of callbacks awkward to deal with.
My rule (like a lot of things in programming) is use context to make your decision. .then() works nicely when you're dealing with a limited number of promises. This starts to get awkward when you're dealing with more complex logic.
Using async / await for more involved logic allows you to structure your code more like synchronous code, so it's more intuitive and readable.
An example of two approaches is shown below (with the same essential goal). The async / await version is the more readable I believe.
Async / await also makes looping over asynchronous tasks easy, you can use a for loop or a for ... of loop with await and the tasks will be performed in sequence.
function asyncOperation(result) {
return new Promise(resolve => setTimeout(resolve, 1000, result));
}
async function testAsyncOperationsAwait() {
const result1 = await asyncOperation("Some result 1");
console.log("testAsyncOperationsAwait: Result1:", result1);
const result2 = await asyncOperation("Some result 2");
console.log("testAsyncOperationsAwait: Result2:", result2);
const result3 = await asyncOperation("Some result 3");
console.log("testAsyncOperationsAwait: Result3:", result3);
}
function testAsyncOperationsThen() {
return asyncOperation("testAsyncOperationsThen: Some result 1").then(result1 => {
console.log("testAsyncOperationsThen: Result1:", result1);
return asyncOperation("testAsyncOperationsThen: Some result 2").then(result2 => {
console.log("testAsyncOperationsThen: Result2:", result2);
return asyncOperation("testAsyncOperationsThen: Some result 3").then(result3 => {
console.log("testAsyncOperationsThen: Result3:", result3);
})
})
})
}
async function test() {
await testAsyncOperationsThen();
await testAsyncOperationsAwait();
}
test();

... But is it really a good way and isn't there a better way ?
No it's not a good idea because it hurts code readability.
You're mixing 2 interchangeable concepts, Promise.then/catch and async/await. Mixing them together creates readability overhead in the form of mental context switching.
Anyone reading your code, including you, would need to continuously switch between thinking in terms of asynchronous flows(.then/.catch) vs synchronous flows (async/await).
Use one or the other, preferably the latter since it's more readable, mostly because of it's synchronous flow.
Although I don't agree with how you're handling logins, here's how I would rewrite your code to use async/await and try...catch for exception handling:
function getSomeData() {
return post('mySpecialMethod')
}
async function login() {
const params = { } // some params
await post('myLoginMethod', params)
return { success: true }
}
const loginError = [1, 101]
async function post(method, params, isRetry) {
const options = {} // some options
try {
const data = await request(options)
return data.result
} catch (ex) {
const err = ex.error.error || ex.error
if (err) throw err
if (loginError.includes(err.code) && !isRetry) {
await login()
return post(method, params, true)
}
throw err
}
}
I obviously cannot/didn't test the above.

Also worth exploring the libraries which provides retry functionalities.
something like https://www.npmjs.com/package/async-retry

Generally this is not a big problem. You can chain/encapsulate async calls like this.
When it comes to logic it depends on your needs. I think the login state of a user should be checked before calling any API methods that require authentication.

Promise.all is not working/waiting JavaScript in combination with mongoose

I got a problem that the await Promise.all is not working in my case. I attached the code and the output I got:
await Promise.all(allIndizes.map(async (index) => {
await axios.get(uri)
.then(async function (response) {
let searchResult = response.data.hits.hits;
console.log('Search Result: ' + searchResult);
await Promise.all(searchResult.map(async (element) => {
await primaryKeyModel.findById(element._id).exec((err, pk) => {
console.log('PK, direct after search: ' + pk);
//DO SOME STUFF HERE BUT DELETED IT TO SHORTEN THE CODE
}
})
console.log('test1');
}));
})
console.log('test2');
}));
The output is the following:
test1
test2
PK, direct after search: { _id: 5bf1c0619674e2052a4f6a64 ... }
I actually would actually expect that the first output is the 'PK, direct after search'. I don't understand why the function is not waiting? Do someone has a hint, whats wrong here? I found a similar issue here and I adopted the logic but its still not working. Thanks for the help.
I tried to shorten the code as much as possible. I only deleted statements which are not affecting the async execution.

Mongoose supports promises for a long time, callback-based API is obsolete, it's a mistake to use it where a promise is expected (await).
then is unwanted inside of async functions, this defies the purpose of using async..await.
It should be:
await Promise.all(allIndizes.map(async (index) => {
const response = await axios.get(uri);
let searchResult = response.data.hits.hits;
await Promise.all(searchResult.map(async (element) => {
const pk = await primaryKeyModel.findById(element._id);
//DO SOME STUFF HERE BUT DELETED IT TO SHORTEN THE CODE
}));
}));

How to return the result of a promise in a function

I'm really confused about why I can not return the JSON result from amazonMws.products.search() and could use some help understanding what is going on. When I write it this way gives me undefined:
function listMatchingProducts(query) {
const options = {
Version: VERSION,
Action: 'ListMatchingProducts',
MarketplaceId: MARKET_PLACE_ID,
SellerId: SELLER_ID,
Query: query
}
amazonMws.products.search(options, (err, res) => {
if(err){
throw(err)
return
}
return res
})
}
I also get undefined when using amazonMws.products.search().then().catch() as well.
If I return amazonMws.products.search() I get a promise back instead of the result.
Inside of the callbacks if I console.log(res) I get back the JSON result I'm expecting. So this led me to believe I need to use async await I think, but this results in Promise { <pending> }:
async function listMatchingProducts(query) {
const options = {
Version: VERSION,
Action: 'ListMatchingProducts',
MarketplaceId: MARKET_PLACE_ID,
SellerId: SELLER_ID,
Query: query
}
return await amazonMws.products.search(options)
.then(res => {
return res
})
.catch(e => errorHandler(e))
}
I am totally lost, so if someone could explain to me what is going on, that would be greatly appreciated.

The amazonMws.products.search function is asynchronous, meaning that it will give you a value later, and because of this, you can't get the value now. Instead, you'll have to say what you want to do later when you receive the value.
This is what returning the promise does. The promise itself is the representation of this value that you'll receive later.
function listMatchingProducts(query) {
const options = {
Version: VERSION,
Action: 'ListMatchingProducts',
MarketplaceId: MARKET_PLACE_ID,
SellerId: SELLER_ID,
Query: query
}
return amazonMws.products.search(options)
}
Then, when calling the function, attach a handler to the promise.
listMatchingProducts(someQuery)
.then(result => {/* do something with result */})
.catch(error => {/* handle the error */})
And, though you don't need to use async await here, it can make the code look a little nicer in some situations, as though it were synchronous. Here's what calling the above function would look like with async await:
async function getProducts() {
try {
const result = await listMatchingProducts(someQuery)
// do something with result
} catch (error) {
// handle the error
}
}
And, as usual, always consult the docs for any detail you're confused about:
Using promises
await keyword

function listMatchingProducts(query) {
const options = {
Version: VERSION,
Action: 'ListMatchingProducts',
MarketplaceId: MARKET_PLACE_ID,
SellerId: SELLER_ID,
Query: query
}
return amazonMws.products.search(options); //returns a promise
}

As others have pointed out, Promises just don’t work the way you think they do.
See my answer to function returning too early before filter and reduce finish for a (hopefully) clear explanation of the problem you face.