Develop Reference

How to use Promise.all with if statement init

For last few hours I am trying to make condition inside Promise.all to read images if there is a path for it or to pass a specific value if there is not.
When I use my code results that I get in next .then part is undefined. I checked the values that I am passing, they are not undefined. What can cause the problem?
Here is my code:
readPostImages: (rows) => {
return Promise.all(
rows.map((value) => {
if (value.firstImage != "null") {
return fs.promises.readFile(value.firstImage, {
encoding: "base64",
});
} else {
return Promise.resolve("null");
}
})
);
},
And here is my App.js that return undefined:
.then((result) => {
postModules.readPostImages(result);
})
.then((result) => {
console.log(result);
// return postModules.addImagesToData(rows, result);
})

Making a function chainable with then()

I have a function that uses fetch() to get a value from a database, which is then used to update an element on my page:
function AjaxUpdate(_element, _url, _form_data) {
if (!_element) return; // Nothing to update.
if (concurrency++ == 0)
LoadStatus(_form_data === undefined ? "Loading..." : "Processing...");
fetch(_url, {
method: _form_data === undefined ? "GET" : "POST",
body: _form_data,
})
.then((response) => response.text())
.then((text) => {
if (_element.nodeName == "INPUT") _element.value = text;
else _element.innerHTML = text;
/* inserted */ return new Promise(function (resolve, reject) {
resolve(text);
});
})
.catch((error) => alert(error.message))
.finally(() => {
if (--concurrency == 0) LoadStatus("");
});
}
I like this function to be chainable, by calling it like this:
const company_form = document.getElementById("company_form");
const company_properties = document.getElementById("company_properties");
const cmc_info = document.getElementById("cmc_info");
AjaxUpdate(company_properties, "company?action=edit&CompanyID=12345", new FormData(company_form))
.then(text => { AjaxUpdate(cmc_info, "company?action=editcmc&CompanyID=12345"); });
The initial call is a POST (updates the database) and the second call should wait for the first to complete before starting. To do so I inserted a return new Promise() statement, but that does not work as expected. The initial function call is executed (database is updated) but then I get an error message "TypeError: function AjaxUpdate(...) is undefined".
The single call version is used many times and runs OK; when I put a then() at the end, it breaks down.
Could anyone give me a push...?

You need to add a return statement to AjaxUpdate for the case where you fetch data. And for consistency, you should return a promise in the if (!_element) case too.
function AjaxUpdate(_element, _url, _form_data) {
if (!_element) return Promise.resolve();
// ^^^^^^^^^^^^^^^^^---- MODIFIED
if (concurrency++ == 0)
LoadStatus(_form_data === undefined ? "Loading..." : "Processing...");
return fetch(_url, {
//^^^^^^---- ADDED
method: _form_data === undefined ? "GET" : "POST",
body: _form_data,
})
.then((response) => response.text())
.then((text) => {
if (_element.nodeName == "INPUT") _element.value = text;
else _element.innerHTML = text;
return text;
})
.catch((error) => alert(error.message))
.finally(() => {
if (--concurrency == 0) LoadStatus("");
});
}

Your return statement is scoped under the callback of the then invocation. So AjaxUpdate is not actually returning that Promise but an implicit undefined.
I suggest you three possible solutions.
Return the fetch promise chain result
function AjaxUpdate(_element, _url, _form_data) {
if (!_element) {
// return a dummy Promise
return Promise.resolve(/* whatever you want as a default*/);
}
// ...
// Returning fetch promise chain
return fetch(...)
.then(...)
.then((text) => {
// ...
return text;
// text will be passed from the next `then` invocation
});
}
Return a whole Promise which resolves whenever you need to
function AjaxUpdate(_element, _url, _form_data) {
return new Promise((resolve, reject) => {
if (!_element) {
resolve(/* Any default value ...*/);
// or even reject();
}
// ...
fetch(...)
.then(...)
.then((text) => {
// ...
resolve(text);
})
.catch(reject)
.finally(...);
});
}
Make AjaxUpdate async so it will return an implicit Promise
async function AjaxUpdate(_element, _url, _form_data) {
if (!_element) {
return;
}
// ...
try {
const response = await fetch(...);
const text = await response.text();
// ...
return text;
} catch (e) {
// ...
}
// Finally
// ...
}
Hope it helps.

Promise function returns undefined

Help, I'm just trying to learn the promise function. I am confused how to return the promise function value.
static getTrailer(movieId) {
return fetch(`http://api.themoviedb.org/3/movie/${movieId}?api_key=###&append_to_response=videos`)
.then(response => {
return response.json();
})
.then(responseJson => {
if (responseJson.videos.results[0]) {
Promise.resolve(responseJson.videos.results[0].key)
.then(result => {
console.log(result);
return result;
});
} else {
return Promise.reject(`Trailer is not found`);
}
});
}
This is where i tried to get the result
<p>${DataSource.getTrailer(this._movie.id).then(resultKey => {console.log("data is: " + resultKey)})}</p>
But the resultKey always return undefined value. How can i fix this ?

if (responseJson.videos.results[0]) { then you don't return anything, so the promise resolves as undefined.
And why are you even doing anything with Promise.resolve in the first place?
Get rid of the pointless extra promise, and return the value you want to resolve the then with.
.then(responseJson => {
if (responseJson.videos.results[0]) {
const result = responseJson.videos.results[0];
console.log(result);
return result;
} else {
return Promise.reject(`Trailer is not found`);
}
});

To pass data down a promise chain, you need to return (either explicitly, or implicitly from an arrow function)
Here it is, nice and simple;
static getTrailer(movieId) {
return fetch(`http://api.themoviedb.org/3/movie/${movieId}?api_key=###&append_to_response=videos`)
.then(response => response.json())
.then(responseJson => responseJson.videos.results[0].key) // an error thrown for whatever reason, will caught below.
.catch(error => {
// an error thrown by any of the three preceding stages will end up here
throw new Error(`Trailer is not found`); // throwing is less expensive than returning Promise.reject()
});
}

You don't need to use promise for the get the key again.
static getTrailer(movieId) {
return fetch(`http://api.themoviedb.org/3/movie/${movieId}?api_key=###&append_to_response=videos`)
.then(response => {
return response.json();
})
.then(responseJson => {
if (responseJson.videos.results[0]) {
result = responseJson.videos.results[0].key;
console.log(result);
return result;
} else {
return Promise.reject(`Trailer is not found`);
}
});
}

Promises can't run code after resolve/reject

I have async function in async function. In the second I must wait when promises resolve or reject and after run other code below. But if promise reject my code stopping and no run other functions. How I can fix it?
await axios.all(promises).then(res => {
axios.patch("/url", { foo: bar }).then(async () => {
const promises2 = arr.map(item => {
return axios.post("/url-2", item)
});
await Promise.all(promises2)
.then(() => console.log("resolved")) //this not calling ever
.catch(() => console.log("failed")) //this not calling ever
console.log("This console log ever not working")
})
})

Promises aren't chained properly, axios.patch(...) promise isn't returned. await is syntactic sugar for then and catch, its purpose is to get rid of nested functions where possible. It should be:
const res = await axios.all(promises)
await axios.patch("/url", { foo: bar })
const promises2 = arr.map(item => {
return axios.post("/url-2", item)
});
try {
await Promise.all(promises2)
console.log("resolved"))
} catch (err) {
console.log("failed");
}

The order of your code is wrong. Of course if the first promise is rejected, then the rest will not be called.
Try rewriting your code this way:
let res = await axios.all(promises).catch(() => { console.log("failed"); return false; });
if (!res) {
// Do something when rejected
....
}
// Call the 2nd promise
let res2 = await axios.path("/url", {foo: bar}).catch(() => {console.log("failed 2"); return false; });
if (!res2) {
// Do something when the 2nd promise is rejected
...
}
// Call your last promise
let res3 = await Promise.all(promises2).catch(() => {console.log("failed 3"); return false; });
if (!res3) {
// Do something if it is rejected again
....
}
// Otherwise, do your thing

Try this code, it should pinpoint where the error or rejection is occurring (i.e. it's definitely before Promise.all(promises2) is run
await axios.all(promises)
.then(res => axios.patch("/url", { foo: bar }), err => {
throw `all(promises) failed with ${err}`;
})
.then(() => {
const promises2 = arr.map(item => {
return axios.post("/url-2", item);
});
return Promise.all(promises2)
.then(() => console.log("resolved")) //this not calling ever
.catch(err => {
throw `all(promises2) failed with ${err}`;
});
}, err => {
throw `patch failed with ${err}`;
})
.catch(err => console.error(err));
Note I've removed async/await, because in the code you've posted it is totally unnecessary

Understanding of the promises chaining: 'then()' get's undefined parameter as the result

I started to work deeply with promises, and need your help to understand why this code doesn't work as expected.
Here is what I need:
After successful profile retrieving the code should log out ('success getting Profile!') which it does, and return true as result, that should be passed to the next then() element. But instead of true, I get undefined as the result.
public verifyAuth(): angular.IPromise<boolean> {
let promise: ng.IPromise<boolean> = this._Token.getIdToken()
.then((idToken) => {
if (!idToken) {
return false;
}
else if (this._Profile.isEmpty()) {
promise = this.retrieveProfileInfo()
.then(() => {
this._$log.log('success getting Profile!');
return true;
});
} else {
return true;
}
})
.catch((error) => {
this._Token.clearToken();
this._$log.error(error);
return false;
});
return promise;
}

You are returning the first promise object before your reassign it later in the success then block. You don't need to do it just use chaining like this:
public verifyAuth(): angular.IPromise<boolean> {
let promise: ng.IPromise<boolean> = this._Token.getIdToken()
.then((idToken) => {
if (!idToken) {
return false;
}
else if (this._Profile.isEmpty()) {
return this.retrieveProfileInfo()
.then(() => {
this._$log.log('success getting Profile!');
return true;
});
} else {
return true;
}
})
.catch((error) => {
this._Token.clearToken();
this._$log.error(error);
return false;
});
return promise;
}
Note, how you simply return this.retrieveProfileInfo() which becomes new promise automatically.