Basically I'm trying to fetch the URL and URLPaths for two images I've uploaded (to Firebase) using the firebase function /storeImage and JSON.Stringify().
Below is the snippet of code that enables me to fetch data for the ONE image.
.then(token => {
authToken = token;
return fetch("myappURL/storeImage",
{
method: "POST",
body: JSON.stringify({
image: image.base64
}),
headers: {
Authorization: "Bearer " + authToken,
}
});
})
.catch(err => {
console.log(err);
alert("Oops! Something went wrong, please try again1")
dispatch(uiStopLoading());
})
.then(res => {
if (res.ok) {
return res.json();
} else {
throw(new Error());
}
})
.then(parsedRes => {console.log(parsedRes);
Now I want to fetch data from a second image.
What I gather, from the docs I've read, is that I should use promises for multiple async calls like what I have above. So, shouldn't something like this (see below) work?
.then(token => {
authToken = token;
let image = fetch(... image: image.base64 ...);
let coverImage = fetch(... coverImage: coverImage.base64 ...);
Promise.all([image, coverImage])
.then(ress => { ress.forEach(
res => {
process( res.json() );
})
})
.catch(err => {...})
.then(res => {...})
.then(parsedRes => {console.log(parsedRes);)
Spoiler alert. I tried and it didn't. But I cannot understand why.
When you chain promises together, that is, start a new promise inside a then callback you need to return it.
Promise.all returns a single new promise that resolves when all of the promises passed to it resolve. In your code above you're neglecting to return it.
E.g. Try running this code which logs undefined
Promise.resolve()
.then(() => {
Promise.all([Promise.resolve(1), Promise.resolve(2)])
})
.then(result => console.log(result))
vs this code which logs [1, 2]
Promise.resolve()
.then(() => {
return Promise.all([Promise.resolve(1), Promise.resolve(2)])
})
.then(result => console.log(result))
Related
I have this function in my React App. It calls a few other functions. Everything works except, I need the .then(() => this.getHCAid()) to complete before .then(() => this.addDocsList()) runs. I have not been able to make that happens. I'm sure it's simple, I just don't know how.
createHCA() {
fetch(API_URL + `/hca/create`, {
method: "PUT",
body: JSON.stringify({
client: this.state.client,
short: this.state.short,
}),
headers: { "Content-Type": "application/json" },
})
.then((res) => {
if (!res.ok) {
throw new Error();
}
return res.json();
})
.then((data) => console.log(data))
.catch((err) => console.log(err))
.then(() => this.getHCAid()) <--- Need this to complete
.then(() => this.addDocsList()) <--- Before this runs
.then(() => this.getAllHCAs());
this.setState({ showHide: false});
}
I'd encourage you to do a couple of things here...
Use async/await rather than a myraid of .then promises memoize
these function calls and use a useEffect (or multiple) with
dependencies to control when side-effects should be triggered. Convert to functional component to achieve this result.
"showHide" is a very confusing term for future developers, be kind to
your future self and future devs and make a term like "show" or
"isHidden"
If you really want to continue this pattern (chained .then statements), put your .catch at the very bottom to handle any issues/errors. This is where async/await is worth the time to quickly learn.
You only want functions doing one main thing, and this is to createHCA, let your other code trigger the functions. As you scale you will be thankful you did.
async function createHCA() {
let data
try {
data = await fetch(API_URL + `/hca/create`, {
method: "PUT",
body: JSON.stringify({
client: this.state.client,
short: this.state.short,
}),
headers: { "Content-Type": "application/json" },
})
} catch e => {
throw new Error(e.message)
return
}
this.setState({ showHide: false});
return data?.json()
}
It sounds like there are two issues going on here.
The first is that your functions sound like database queries or updates which will be asynchronous so you can't rely on the next step in the cycle to have access to any data returned if it hasn't been told to wait.
The solution you tried to come up with, setting state in one of the then methods, won't work either because it too batches up queries and processes them asynchronously, and the next step won't have access to that data either.
So, ideally what you should probably do is use a promise to return the id from getHCAid, and then pass that into addDocsList which also returns a promise, etc.
Here's a simplified example using async/await.
getHCAid() {
return new Promise((res, rej) => {
// Do DB process, get an id
res(id);
});
}
async getData() {
const response = await fetch(API_URL);
const data = await response.json();
const id = await this.getHCAid();
const list = await this.addDocsList(id);
const hcas = await this.getAllHCAs();
this.setState({ showHide: false });
}
I have this method in my React app:
My issue is that the createQuestions() runs before the findEmployeeId() method is done. Shouldn't the .then make it wait?
Inside the findEmployeeId() it is doing a setState operation. Does it not wait for that to finish? I need that data update before the createQuestions() runs.
createInterview() {
fetch(API_URL + `/interview/create`, {
method: "PUT",
body: JSON.stringify({
employee: this.state.employee,
employment_level: this.state.employment_level,
audit_id: this.props.auditId,
}),
headers: { "Content-Type": "application/json" },
})
.then((res) => {
if (!res.ok) {
throw new Error();
}
return res.json();
})
.catch((err) => console.log(err))
.then(() => this.findEmployeeId())
.then(() => this.createQuestions());
this.setState({ showHide: false });
}
This is the findEmployeeId method. How can I make it wait until completion before the next one runs?
findEmployeeId() {
fetch(API_URL + `/employee/${this.state.employee}/${this.props.auditId}`)
.then((res) => {
if (!res.ok) {
throw new Error();
}
return res.json();
})
.then((result) => {
this.setState({ lastEmployeeId: result[0].employee_id });
console.log(result);
})
.catch((error) => {
console.log(error);
});
}
#raina77ow wrote it in his comment already, but to state it a little more clearly, I think you need to return the promise from findEmployeeId():
findEmployeeId() {
/* Note the return here */
return fetch(API_URL + `/employee/${this.state.employee}/${this.props.auditId}`)
.then((res) => {
if (!res.ok) {
throw new Error();
}
return res.json();
})
.then((result) => {
this.setState({ lastEmployeeId: result[0].employee_id });
console.log(result);
})
.catch((error) => {
console.log(error);
});
}
The question is basically finding a way to guarantee to have createQuestions() executed after findEmployeeId(). This is the heart of the question. The use of the setState Callback can make this to happen. It is said that the use of the setState call back could be cumbersome but if there is a good understanding about composition of two functions then this should not be.
setState is asynchronous... so it is important to not make assumptions on sequentiality for two ops like:
this.setState({stateA : a})
this.setState({stateB : b})
The only way to "force" sequentiality through setState is through its call back:
this.setState({ .... }, () => {do after setState is done})
Somehow this is what you need to follow i.e. at the setState you are using inside findEmployeID it is necessary to do something like:
const self = this;
this.setState({ ..... }, () => {self.createQuestions()})
Whoever placed that negative better explain his reason. The .then part of the fetch does not guaranty sequentiality so it falls to the situation similar where two setStates are executed one after the other. A wait also does not guaranty sequentiality.
I have the following setup where I am trying to make a call to a function which returns a Promise, which in turn has a Promise.all() call to make an indefinite number of axios.post() calls. I tried using axios.all() and axios.spread(...responses), but no luck. I've also tried a number of examples posted to SO from experienced users. But still no luck.
It's worth noting that the calls are being made, it's just that the responses being returned are undefined.
The function being called is the following:
createSurveyResult(surveyResults) {
let token = Vue.prototype.$auth.getLocalStorage(`${this.activeUser.uuid)_{process.env.NODE_ENV}_ACCESS_TOKEN`)
if (token) {
axiosModified.defaults.headers.common['Authorization'] = `Bearer ${token}`
}
return new Promise(resolve => {
let promiseArray = surveyResults.map(payload => {
axiosModified.post('/feedback/results/', payload)
})
Promise.all(promiseArray).then(responses => {
responses.forEach(res => console.log(res))
console.log('submitted all axios calls');
resolve(responses)
}).catch(error => {
resolve(error.response)
})
})
}
Which is being called as:
this.$surveys.createSurveyResult(surveyResults).then((responses) => {
console.log(responses)
});
Yet, both the console.log(res) res objects return are undefined within the Promise.all() , the console.log('submitted all axios calls'); is being called, and the responses from the then() callback are returned as:
I'm wondering what I am doing wrong here?
Write your function like this:
createSurveyResult(surveyResults) {
let token = Vue.prototype.$auth.getLocalStorage(
`${this.activeUser.uuid}_${process.env.NODE_ENV}_${ACCESS_TOKEN}`
);
if (token) {
axiosModified.defaults.headers.common["Authorization"] = `Bearer ${token}`;
}
return Promise.all(
surveyResults.map((payload) =>
axiosModified.post("/feedback/results/", payload)
)
);
}
Consider the following Javascript/React code:
// Javascript function that has a fetch call in it.
export const signIn = (email:string, password:string) => {
console.log("FETCHING...");
fetch(`${endPoint}/sign_in`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email,
password
})
})
.then((response) => {
return response.json()
})
.then(({ data }) => {
console.log("FETCHED DATA...")
})
.catch((error) => {
console.error('ERROR: ', error)
})
console.log("DONE FETCHING...");
}
// A functional component that references signIn.
export const SignIn: React.FC<Props> = () => {
// irrelevant code ...
const onSubmit = (e: CustomFormEvent) => {
e.preventDefault()
console.log("SIGNING IN...")
// calls my signIn function from above
// I don't want this to finish until the fetch inside it does.
signIn(email, password, setAuthentication, setCurrentUser)
console.log("SIGNED IN...");
}
return <>A form here submits and calls onSubmit</>
}
This produces the following console log output:
SIGNING IN...
FETCHING...
DONE FETCHING...
SIGNED IN...
FETCHED DATA...
I want FETCHED DATA... to show up before DONE FETCHING.... I've tried playing around with aysnc/await but that's not working so I don't know where to go from here.
Just add another .then
.then((response) => {
return response.json()
})
.then(({ data }) => {
console.log("FETCHED DATA...")
return
}).then(()=> {
console.log("DONE FETCHING...");
})
.catch((error) => {
console.error('ERROR: ', error)
})
It would have to be in the then statements if you want the console.log to wait until the promise is resolved. Here's an example that uses async/await:
export const signIn = async (email:string, password:string) => {
console.log("FETCHING...");
const response = await fetch(`${endPoint}/sign_in`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email,
password
})
})
const data = await response.json();
console.log("FETCHED DATA...")
console.log("DONE FETCHING...");
}
You would also need to turn this into an async function if you want the console.log to happen after the data is done fetching:
const onSubmit = async (e: CustomFormEvent) => {
e.preventDefault()
console.log("SIGNING IN...")
// calls my signIn function from above
// I don't want this to finish until the fetch inside it does.
await signIn(email, password, setAuthentication, setCurrentUser)
console.log("SIGNED IN...");
}
In order to use async await, you need to return a promise from the call. So basically you don't execute the .then and wrap the call in a try catch block.
export const signIn = async (email:string, password:string) => {
console.log("FETCHING...");
return fetch(`${endPoint}/sign_in`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email,
password
})
})
}
and
const onSubmit = async (e: CustomFormEvent) => {
e.preventDefault()
console.log("SIGNING IN...")
// calls my signIn function from above
// I don't want this to finish until the fetch inside it does.
try {
const data = await signIn(email, password, setAuthentication, setCurrentUser)
// Parse data, do something with it.
console.log("SIGNED IN...");
} catch (e) {
// handle exception
}
}
You may want to look more into how promises in JavaScript works.
One problem here is in signIn. What you're doing right now is:
function signIn() {
// 1. log FETCHING
// 2. call asynchronous fetch function
// 3. log DONE FETCHING
}
The key here is that fetch is asynchronous. The program doesn't wait for it to finish before moving on. See the problem? The JavaScript interpreter is going to run step 3 without waiting for step 2 to finish.
There are multiple ways to fix this. First, you can use then. Here's an example:
promise
.then(res => func1(res))
.then(res => func2(res))
.then(res => func3(res))
Here, you're telling JavaScript to:
Run promise, and wait for it to resolve.
Take the result from promise and pass it into func1. Wait for func1 to resolve.
Take the result from func1 and pass it into func2. Wait for func2 to resolve.
etc.
The key difference here is that you are running each then block in order, waiting for each previous promise to be resolved before going to the next one. (Whereas before you didn't wait for the promise to resolve).
Your code with promises would look like:
export const signIn = (email: string, password: string) => {
console.log("FETCHING...")
// Note that we return the promise here. You will need this to get onSubmit working.
return fetch(/* args */)
.then(res => res.json())
.then(({ data }) => console.log("DONE FETCHING"))
.catch(err => /* HANDLE ERROR */)
}
The second way to fix this is to use async and await. async and await is simply syntax sugar over promises. What it does underneath is the exact same, so make sure you understand how promises work first. Here's your code with async and await:
// The async keyword here is important (you need it for await)
export const signIn = async (email: string, password: string) => {
console.log("FETCHING...");
try {
const res = await fetch(/* args */) // WAIT for fetch to finish
const { data } = res.json()
console.log("FETCHED DATA...")
} catch (err) {
/* HANDLE ERROR */
}
console.log("DONE FETCHING...")
}
There's also a second similar problem in onSubmit. The idea is the same; I'll let you figure it out yourself (the important part is that you must return a Promise from signIn).
I am building out an Express API built with the mssql package.
If I don't call sql.close() then I get the following error:
Error: Global connection already exists. Call sql.close() first.
I'd like to keep the endpoints easy to follow and maintain and like the following pattern using a finally promise pattern.
const sql = require("mssql")
const config = require("../config")
sql.connect(config.properties).then(pool => {
return pool.request()
.execute('chain')
.then(response => {
res.send(response['recordsets'][0][0]['response'])
})
.catch(err => res.send(err))
.finally(sql.close())
})
However, this generates the following error:
{
"code": "ENOTOPEN",
"name": "ConnectionError"
}
The following code works, but it seems a bit clumsy to define sql.close multiple times in the same function.
sql.connect(config.properties).then(pool => {
return pool.request()
.execute('chain')
.then(response => {
res.send(response['recordsets'][0][0]['response'])
sql.close()
})
.catch(err => {
res.send(err)
sql.close()
})
})
Is there a way to call sql.close as part of the promise chain after either a response or error is sent with res.send?
.finally accepts function, you passing result of function
sql.connect(config.properties).then(pool => {
return pool.request()
.execute('chain')
.then(response => {
res.send(response['recordsets'][0][0]['response'])
})
.catch(err => res.send(err))
.finally(() => sql.close()) // FIX HERE
})