I'm having an issue with Promise.all in React. I'm creating promises for my axios request and at the end run a Promise.all to dispatch all the data.
Here is my method where I create the Promises:
function promiseLoad(nameID, uID, caption) {
return new Promise( () => {
axios.get(`${URL}/users/${uID}/name/${nameID}`)
.then(res => {
let obj;
if(res.data !== -1) {
obj = {
fullName: res.data,
caption: caption
};
}
return obj;
});
});
}
Then, in my export method, I run the Promise.all before dispatch it to the reducer.
export const loadUsers = (users, uID) => {
return dispatch => {
let promises = [];
imgs.forEach(element => {
promises.push(promiseLoad(element.id, uID, element.caption));
});
console.log('Promises');
console.log(promises);
Promise.all(promises)
.then(res => {
console.log('here');
console.log(res);
dispatch(getUsers(res));
});
}
}
The getUsers just a helper method to return the type/action
export const getUsers = (res) => {
return {
type: actionTypes.GET_USERS,
payload: res
}
}
When I run the code, I can see in the log:
Promises
Array(10) // array with 10 pending promises
The logs inside the .then() method of Promise.all, never runs.
axios.get returns a promise already, so you don't need to wrap it in the Promise constructor. Note that if you do construct a Promise, to avoid it never resolving, you must at least call resolve in the executor. In your case, promiseLoad was returning a Promise that never resolved, so you weren't seeing those logs.
function promiseLoad(nameID, uID, caption) {
return axios.get(`${URL}/users/${uID}/name/${nameID}`)
.then(res => {
let obj;
if(res.data !== -1) {
obj = {
fullName: res.data,
caption: caption
};
}
return obj;
});
}
Related
Hello I have this async function which retrieves user profile and repositories through github api and returns them in an object.
And I want to convert this to a promise based function by using promise chaining (without any helper methods).
async function getUser(user) {
const profileResponse = await fetch(`https://api.github.com/users/${user}`);
const profileData = await profileResponse.json();
const repoResponse = await fetch(`https://api.github.com/users/${user}/repos`);
const reposData = await repoResponse.json();
// returning an object with profile and data
return {
profile:profileData,
repos:repoData,
};
}
//Calling the function here.
getUser("abufattah").then((res) => console.log(res));
I have managed to get it done using two helper functions and promise.all() method.
But how can I achieve the same thing by using promise chaining without any helper functions.
//Helper function 1: returns a promise with user profile data.
function getUserProfile(user) {
return fetch(`https://api.github.com/users/${user}`)
.then((res) =>res.json());
}
//Helper function 2: returns a promise with user repositories data.
function getUserRepos(user) {
return fetch(`https://api.github.com/users/${user}/repos?per_page=5&sort=created`)
.then((res) => res.json());
}
//Main function
function getUserWithPromise(user) {
return new Promise((resolve) => {
let profile = getUserProfile(user);
let repos = getUserRepos(user);
Promise.all([profile, repos]).then((values) => {
resolve({ profile: values[0], repos: values[1] });
});
});
}
// calling the function here
getUserWithPromise("abufattah").then((res) => console.log(res));
Transformation of async/await syntax to .then() calls is quite mechanical, especially if it doesn't involve any control flow syntax (loops or conditionals):
function getUser(user) {
return fetch(`https://api.github.com/users/${user}`).then(profileResponse => {
return profileResponse.json().then(profileData => {
return fetch(`https://api.github.com/users/${user}/repos`).then(repoResponse => {
return repoResponse.json().then(reposData => {
// returning an object with profile and data
return {
profile:profileData,
repos:repoData,
};
});
});
});
});
}
But there's no good reason to write code like that. If it's just that your target environment does not support async/await, let a transpiler do the transformation.
You can:
//Main function
function getUserWithPromise(user) {
return Promise.all([
fetch(`https://api.github.com/users/${user}`).then((res) =>res.json()),
fetch(`https://api.github.com/users/${user}/repos?per_page=5&sort=created`).then((res) => res.json())
]).then(([result1, result2]) => ({ profile: result1, repos: result2 }));
}
// calling the function here
getUserWithPromise("abufattah").then((res) => console.log(res));
Chain:
function getUserWithPromise(user) {
return fetch(`https://api.github.com/users/${user}`)
.then((res) => {
return fetch(`https://api.github.com/users/${user}/repos?per_page=5&sort=created`).then((fetch2Result) => ([res.json(), fetch2Result.json()]))
}).then(([result1, result2]) => ({ profile: result1, repos: result2 }))
}
// calling the function here
getUserWithPromise("abufattah").then((res) => console.log(res));
I'm having difficulty understanding why I still have pending promises after awaiting Promise.all().
In the example below, I'm creating an array of promises by calling an async function on each element of an array, using .map().
Now, why is the promise still showing as pending? The way I (mis)understand it right now:
then() fires once the promise from storeData() resolves
storeData()resolves once newDataArray is returned
newDataArray is returned once all promises inside the promisesArray are resolved or once the first one rejects.
storeData(OldDataArray).then(values => console.log(values))
// console shows:
// { id: 1, data: Promise { <pending> } },
// { id: 2, data: Promise { <pending> } }
const storeData = async (OldDataArray) => {
try {
const promisesArray = OldDataArray.map((item) => {
let newData = downloadMoreDetails(item.id, item.group); //async function, see below
return {
id: item.id,
data: newData,
};
});
const newDataArray = await Promise.all(promisesArray); // <-- I'm awaiting all promises to complete before assigning to newDataArray
return newDataArray;
} catch (error) {
console.log(error)
}
};
const downloadMoreDetails = async (id, group) => {
const response = await fetch(
`example.com/id/group.xml`
);
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
const str = await response.text();
const json = convert.xml2json(str, {
compact: true,
spaces: 2,
});
return json;
};
newData is a promise, but you're not awaiting the promise. Instead, you're awaiting an array of objects {id: item.id, data: newData } that has the promise inside it. Promise.all() doesn't look inside those objects to find the promise and wait for that promise. It just sees an array of plain objects which means it has nothing to do. You can fix that by doing this:
const storeData = async (OldDataArray) => {
try {
const promisesArray = OldDataArray.map(async (item) => {
let newData = await downloadMoreDetails(item.id, item.group); //async function, see below
return {
id: item.id,
data: newData,
};
});
return Promise.all(promisesArray);
} catch (error) {
// log and rethrow error so the caller gets the rejection
console.log(error);
throw error;
}
};
This changes the .map() callback to be async. That does two beneficial things. First, it means the resulting array from .map() will be an array of promises since the async callback always returns a promise. And, second, it allows you to use await inside the callback so you can populate your returned object with the actual data, not with a promise.
Then, the return from inside the async callback will cause that value to become the resolved value of the promise that the async function is returning.
Note, you could have also done it without adding the async/await like this:
const storeData = (OldDataArray) => {
const promisesArray = OldDataArray.map((item) => {
return downloadMoreDetails(item.id, item.group).then(newData => {
return {
id: item.id,
data: newData,
};
});
});
return Promise.all(promisesArray).catch(error => {
// log and rethrow error so the caller gets the rejection
console.log(error);
throw error;
});
};
In this version, you directly return a promise from the .map() callback and you make sure that promise resolves to your data object.
I have a collection of promises or async functions, I need to manipulate slightly and then execute in parallel.
The issue I am having is that I am unable to resolve the promises.
// Some dummy tasks:
const taskA = () => Promise.resolve(500);
const taskB = () => {
return new Promise(resolve => resolve(300));
};
// Push them into an array:
const tasks = [];
const registerTask = (name, task) => {
tasks.push( async () => {
return { [name]: await task() };
});
};
// trying to get the results
const runTasks = () => {
const result = Promise.all(tasks).then(results => results);
return result;
}
// usage
registerTask('taskA', taskA);
registerTask('taskB', taskB);
console.log(runTasks())
Following the successful resolution of promises ideally I would also like to handle errors individually for each task.
The problem is that your registerTask function pushes functions onto the tasks array, not Promise objects. If you change the function like this, it should work:
const registerTask = (name, task) => {
const asyncFunc = async () => {
return { [name]: await task() };
};
tasks.push( asyncFunc() ); // This pushes a promise into 'tasks'
};
Your original code ended up with tasks being an array of functions that have not been called yet. When you call Promise.all(tasks) it ended immediately with undefined for each entry in the array because there were no Promise objects to wait on.
As for error handling, the Promise.all will fail with the first rejection or exception that happens. If you want to handle each task's individual error case, then you should do that in the Promise created in registerTask since doing it during the Promise.all is too late. It's hard to give an example since I'm not sure what kind of error handling would be appropriate for tasks, but perhaps something like this:
const registerTask = (name, task) => {
const asyncFunc = async () => {
return { [name]: await task() };
};
const promise = asyncFunc()
.catch(err => {
return handleError(name, err);
});
tasks.push( promise );
};
function handleError(name, err) {
console.log(`Task ${name} had error ${err}`);
// don't re-throw the error if you want all tasks to complete
// return some error object so you can see which tasks failed after they're done
return {error: err, name: name};
}
Promise.all expects an array of promises and you are passing an array of functions that returns a promise. So change your promise Promise.all to receive the promise of each function:
// Some dummy tasks:
const taskA = () => Promise.resolve(500);
const taskB = () => {
return new Promise(resolve => resolve(300));
};
// Push them into an array:
const tasks = [];
const registerTask = (name, task) => {
tasks.push( async () => {
return { [name]: await task() };
});
};
// trying to get the results
const runTasks = () => {
const result = Promise.all(tasks.map(task => task())); // Execute the tasks to receive the promises
return result;
}
// usage
registerTask('taskA', taskA);
registerTask('taskB', taskB);
runTasks().then((res) => {console.log(res)})
This is where I am stuck:
var verifyEmp = async function () {
return 'Verified';
}
Employee.find(email, password)
.then((emp) => {
console.log(emp);
return verifyEmp();
})
.then((msg) => {
console.log({ verificationMsg: msg });
})
.catch((err) => {
console.log(err);
})
As you can see, verifyEmp is a promise returning function(For demo purposes, I have kept this function as simple as possible). So, what I want to achieve is to be able to log { Emp: emp, verificationMsg: msg } in my second then. How do I pass emp variable in the second then while returning the promise.
I know this is conveniently achievable via async/await. I am just exploring how it can be done using traditional promises.
If you just want to use promises, you can nest a then() into the second one that resolves with the result of the first:
const verifyEmp = async function () {
return 'Verified';
}
const Employee = {
async find() {
return "An employee"
}
}
Employee.find()
.then(emp => verifyEmp().then(msg => [emp, msg]))
.then(([emp, msg]) => {
/* do something with amp and msg */
console.log({emp: emp, verificationMsg: msg });
})
.catch((err) => {
console.log(err);
})
You can return the Promise result from the verifyEmp().then() call (as async functions return a Promise) from the first find().then callback.
There you can pass both the result of the verifyEmp() call and also the emp object from the current scope wrapped in another object to the next then in the chain.
The Promise from the verifyEmp().then() gets automatically unwrapped in the next then callback in the chain:
var verifyEmp = async function () {
return 'Verified';
}
const Employee = {
find: async function(email, password){
return {email, password, "id":123};
}
}
Employee.find("test#abc.com", "test")
.then((emp) => {
//This promise woud get unwrapped in the next .then callback
return verifyEmp()
.then((msg) => ({emp,msg}));
})
.then((msg) => {
console.log(msg);
})
.catch((err) => {
console.error(err);
})
Didn't test it. Use an async iife or something of sort, if you hate anti-patterns. This solution will work regarless of verifyEmp returning a promise or not.
var verifyEmp = async function () {
return 'Verified';
}
Employee.find(email, password)
.then((emp) => {
console.log(emp);
return (async function(){return verifyEmp()})().then((ver)=>[emp,ver]);
})
.then((msg) => {
console.log({ verificationMsg: msg });
})
.catch((err) => {
console.log(err);
})
Just return json object instead of string.
var verifyEmp = async function () {
return 'Verified';
}
Employee.find(email, password)
.then((emp) => {
console.log(emp);
return {emp:emp, msg:verifyEmp()};
})
.then((res) => {
console.log({ Emp: res.emp, verificationMsg: res.msg });
})
.catch((err) => {
console.log(err);
})
I would like my function to execute until the nextPageToken is null. When I execute the function the first time, it waits for the promise to be resolved. However as soon there is a nextPageToken present on the response, the function does not wait for the response and a stack overflow occurs.
It seems that f() is not suspended on the when await p.then() is called.
Am I totally misunderstanding how async/await works?
Any help would be greatly appreciated...
public apiResult2(path: string, objectName: string, params: any = { }) {
let returnArray = [];
const p = new Promise<any> ((resolve, reject) => {
gapi.load('auth2:client', () => {
gapi.client.request({
path: path,
params: params
}).then(response => {
// resolve this promise with the first key in the response object.
resolve(response.result);
}, reason => {
console.log(reason);
reject(reason.result);
});
});
});
let f = async () => {
let nextPageToken = null;
do {
let r = await p.then(result => {
if (result.hasOwnProperty(objectName)) {
for (let obj of result[objectName]) {
returnArray.push(obj);
}
}
if (result.hasOwnProperty('nextPageToken')) {
params.nextPageToken = result.nextPageToken;
return result.nextPageToken;
// nextPageToken = result.nextPageToken;
} else {
params.nextPageToken = null;
return null;
// nextPageToken = null;
}
});
nextPageToken = r;
console.log(r);
} while (nextPageToken);
};
f();
return returnArray;
}
If your function needs to "await" some async call, then it must also be async. Your function apiResult2 is not going to wait for f to be finished, in order to return returnArray.
EDIT:
The main issue here is that you are trying to reuse the promise p to make different requests, but this is not possible. The promise p will be initialized with the parameters for the first request, and all the calls to p.then will be fulfilled with the same result: the response for the first page request.
I made some small changes to your code, and got it working with a mocked interface:
const apiResult2 = async (path: string, objectName: string, params: any = { }) => {
const requestPage = async () => new Promise<any> ((resolve, reject) => {
gapi.load('auth2:client', () => {
gapi.client.request({
path: path,
params: params
}).then(response => {
// resolve this promise with the first key in the response object.
resolve(response.result);
}, reason => {
console.log(reason);
reject(reason.result);
});
});
});
let returnArray: string[] = [];
do {
const page = await requestPage();
if (page.hasOwnProperty(objectName)) {
for (let obj of page[objectName]) {
returnArray.push(obj);
}
}
if (page.hasOwnProperty('nextPageToken')) {
params.nextPageToken = page.nextPageToken;
} else {
params.nextPageToken = null;
}
} while (params.nextPageToken);
return returnArray;
}
Usage example:
apiResult2(path, objectName, params).then(
result => console.log(result),
err => console.log('error', err)
);