I'm trying to perform some actions once all my data are loaded but I have troubles with promises that are not handled properly.
export function waitForAll() {
return function (dispatch, getState) {
Promise.all([
dispatch(getCharacteristics()),
dispatch(getItems())]
).then(()=>{
let state = getState();
dispatch(update(state))
}).catch(function(err){
console.log(err);
});
}
}
And here are the 2 functions called for this promise :
export function getCharacteristics() {
return function (dispatch) {
axios.get('api/charac').then((response) =>
{
dispatch(fetchCharacteristics(response.data));
}).catch(error =>{
console.log(error);
});
}
}
And
export function getItems() {
return function (dispatch) {
axios.get('api/45897').then((response) =>
{
dispatch(fetchItems(response.data.equipements));
}).catch(error =>{
console.log(error);
});
}
}
My states are not updated, that means that my promises are not handled properly, I've initial state like [].
An alternative could be componentDidMount() in React to call that function but I'm not sure how to verify that BOTH states are loaded correctly (different components)
I can't figure out how I can make it work, any help would be welcome!
You aren't actually returning the promise. Arrange your code to return the promise (not just resolve it) and then you'll be able to leverage Promise.all
Example:
async function promise1 () {
const promise = await fetch('https://jsonplaceholder.typicode.com/todos/1');
return promise.json();
};
async function promise2 () {
const promise = await fetch('https://jsonplaceholder.typicode.com/todos/2');
return promise.json();
};
async function getAllPromises() {
const results = await Promise.all([promise1(), promise2()]);
console.log(results);
};
getAllPromises();
Basically, I think you can just return the axios.<httpverb>
Example (best guess as I won't be able to get your code to run):
export function waitForAll() {
return function (dispatch, getState) {
Promise.all([
dispatch(getCharacteristics()),
dispatch(getItems())]
).then(()=>{
let state = getState();
dispatch(update(state))
}).catch(function(err){
console.log(err);
});
}
}
export function getCharacteristics(dispatch) {
return new Promise ( (resolve, reject) {
axios.get('api/charac').then((response) =>
{
resolve(dispatch(fetchCharacteristics(response.data)));
}).catch(error =>{
reject(error);
console.log(error);
});
});
}
export function getItems(dispatch) {
return new Promise ((resolve, reject) {
axios.get('api/45897').then((response) =>
{
resolve(dispatch(fetchItems(response.data.equipements)));
}).catch(error =>{
reject(error);
console.log(error);
});
});
}
Related
I have three async functions but the third function is running before the second one resolves. What is wrong here?
async function getSet () {
//get settings from asyncstorage and setstate
}
async function pairs () {
//fetch data and set another state
}
async function fetchIt () {
//fetch another data and set a third state
}
useEffect(() => {
getSet()
.then(pairs())
.then(fetchIt())
.then(() => {
setLoading(false);
});
}, []);
fetchIt() is running before pairs()
The calls aren't chained properly. To make it simpler use async await:
useEffect(() => {
(async function () {
await getSet();
await pairs();
await fetchIt();
setLoading(false);
})();
}, []);
If each call depends on the result of the last it looks like
const r1 = await getSet();
const r2 = await pairs(r1);
// etcetera
You haven't chained the 'then's properly. They must return a promise as well. Read more here.
const getSet = async() => {
//get settings from asyncstorage and setstate
return new Promise((resolve, reject) => {
resolve('getSet');
});
}
const pairs = async() => {
//fetch data and set another state
return new Promise((resolve, reject) => {
resolve('pairs');
});
}
const fetchIt = async() => {
//fetch another data and set a third state
return new Promise((resolve, reject) => {
resolve('fetchIt');
});
}
getSet()
.then(response => {
console.log(response);
return pairs();
})
.then(response => {
console.log(response);
return fetchIt();
})
.then(response => {
console.log(response);
// setLoading(false);
});
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 am trying to refactor this code using try-catch blocks:
export const authorizeConnectyCube = async (accessToken) => {
const userCredentials = {
provider: 'firebase_phone',
'firebase_phone[project_id]': "xxxxxxxx",
'firebase_phone[access_token]': accessToken,
};
await createSession();
return new Promise((resolve, reject) => {
ConnectyCube.login(userCredentials, (error, user) => {
user ? resolve(user) : reject(error);
})
}).catch(error => console.log(error));
}
const createSession = () => {
return new Promise((resolve, reject) => {
ConnectyCube.createSession((error, session) => {
session ? resolve(session.user) : reject(error)
})
}).catch(error => console.log(error));
}
However I'm not getting the same result - the asynchronousity seems to be being handled differently. Here is my attempt at refactoring:
export const authorizeConnectyCube = async (accessToken) => {
const userCredentials = {
provider: 'firebase_phone',
'firebase_phone[project_id]': "xxxxxxxxxx",
'firebase_phone[access_token]': accessToken,
};
await createSession();
try {
ConnectyCube.login(userCredentials, (error, user) => {
return user;
})
}
catch (error) {
console.log(error)
}
}
const createSession = () => {
try {
ConnectyCube.createSession((error, session) => {
return session.user
})
} catch (error) {
console.log(error);
}
}
Is there any particular part of what I'm wrong? Thanks.
Callback-based APIs don't readily turn into something you can use for async/await (which under the hood uses promises). You'll have to "promisify" them first (i.e. wrap them in promises).
Here's an example of what I'm trying to say:
// Promisify these callback-based APIs.
const login = userCredentials => {
return new Promise((resolve, reject) => {
ConnectyCube.login(userCredentials, (error, user) => {
user ? resolve(user) : reject(error);
})
})
})
const createSession = () => {
return new Promise((resolve, reject) => {
ConnectyCube.createSession((error, session) => {
session ? resolve(session.user) : reject(error)
})
})
})
// Then use them in an async function
export const authorizeConnectyCube = async (accessToken) => {
const userCredentials = {
provider: 'firebase_phone',
'firebase_phone[project_id]': "xxxxxxxx",
'firebase_phone[access_token]': accessToken,
}
try {
await createSession()
return login(userCredentials)
} catch (e) {
console.warn(e)
}
}
Also, async functions return promises, with the resolved value being the return value, and the rejected value being any uncaught error thrown inside. A value wrapped in a promise as return value for an async function is redundant.
If you're using Node 8+, it has a utility called promisify which accepts a callback-based API and returns a promise-returning version of it.
I have a main thunk that gets executed when clicking a button. Inside this thunk I want to call another thunk and wait for it to complete before moving forward. The second thunk executes a promise with nested promises. However, I haven't been able to figure out how to wait for the second thunk to complete its asynchronous operations.
I have tried using the return keyword on my thunk to make the call synchronous. I can't use the async keywords since I need this to work in IE 11.
I have also tried to make my second thunk return a promise and then do something like this dispatch(secondThunk()).then(...) but then it says that my thunk doesn't actually return a promise.
Here is some of my code:
export function mainThunk(): ThunkAction<void, void, void, AnyAction> {
return (dispatch: Dispatch<any>) => {
...do some stuff
dispatch(secondThunk());
...do other stuff
};
}
export function secondThunk(): ThunkAction<void, void, void, AnyAction> {
return (dispatch: Dispatch<any>) => {
return new Promise((resolve: any, reject: any) => {
someAsyncFunction()
.then((response) => {
return Promise.all(someArray.map(someId => {
return someOtherAsyncFunction(someId):
}));
})
.then((responses) => {
response.foreach(response => {
dispatch(someReduxAction(response.someField));
});
})
.then(() => {
resolve();
});
});
};
}
When I run my code the mainThunk is not waiting for the secondThunk to complete before executing. Can you help me figure out how to make this work?
You're almost there. In your mainThunk function you need to wait for the promise to resolve or reject. I've written my demo in Javascript and not Typescript. However the principles are the same. Code-sandbox here
import axios from "axios";
function mainThunk() {
secondThunk()
.then(data => {
console.log("success");
console.log(data);
})
.catch(e => {
console.log("something went wrong");
console.log(e);
});
}
function secondThunk() {
return new Promise((resolve, reject) => {
axios
.get("https://swapi.co/api/people/")
.then(people => {
someOtherAsyncFunction().then(planets => {
const response = {
planets: planets,
people: people
};
resolve(response);
});
})
.catch(e => {
reject(e);
});
});
}
function someOtherAsyncFunction() {
return axios.get("https://swapi.co/api/planets/").then(response => {
return response;
});
}
mainThunk();
I am trying to user webgazer.js where my code basically checks to see whether the webgazer is initialized and when it is initialized it resolves a promise which dispatches an action. This works however if for example there is no webcam I need to throw an error. The error in my code never gets called.
Here is my code
export function detectJsCamera() {
return async(dispatch) => {
dispatch({type: types.JS_DETECTING_CAMERA});
try {
await detectCamera();
await dispatch({type: types.JS_CAMERA_DETECTED});
} catch (error) {
await dispatch({type: types.CAMERA_DETECTION_FAILED, error: error.message});
throw error;
// this.props.history.push('/setup/positioning')
};
}
}
const detectCamera = () => new Promise((resolve, reject) => {
const checkIfReady = () => {
if (webgazer.isReady()) {
resolve('success');
} else {
console.log('called')
setTimeout(checkIfReady, 100);
}
}
setTimeout(checkIfReady,100);
});
You will need to reject in order to throw an exception like below
const detectCamera = () => new Promise((resolve, reject) => {
const checkIfReady = () => {
if (webgazer.isReady()) {
resolve('success');
} else {
console.log('called');
reject("some error");
}
}
setTimeout(checkIfReady,100);
});
You need to call reject() in your detectCamera method when your webgazer is not initialised then it would be caught in your catch block in detectJsCamera method.