I'm new in React and I'm trying to call an async function, but I get the Unexpected reserved word 'await'. ERROR
So my async function is in a Helper class who is supposed to do all the API call, and I'm calling this Helper class in my Game function
Here is my code from Class Helper :
class Helper {
constructor() {
this.state = {
movieAnswer: {},
profile_path:"",
poster_path:"",
myInit: { method: "GET", mode: "cors" }
}
}
fetchMovieFunction = async (randomMovie) => {
return new Promise((resolve) => {
fetch(`${MOVIE_KEY}${randomMovie}?api_key=${API_KEY}`, this.myInit)
.then(error => resolve({ error }))
.then(response => resolve({ poster_path: response.poster_path }));
});
}
and here is where I call fetchMovieFunction in my game function :
const helper = new Helper();
function Game() {
useEffect(() => {
setRandomMovie(Math.floor(Math.random() * (500 - 1) + 1));
const { poster_path, error } = await helper.fetchMovieFunction(randomMovie)
if (error)
return console.log({error});
setApiMovieResponse({poster_path})
}, [page]);
return ();
}
And I don't understand why on this line const { poster_path, error } = await helper.fetchMovieFunction(randomMovie) I get the Unexpected reserved word 'await'. Error like my function is not declare as an async function
two issues:
You should use await inside an async function
But the callback passed to useEffect should not be async. So, you can create an IIFE and make it async:
useEffect(() => {
(async () => {
setRandomMovie(Math.floor(Math.random() * (500 - 1) + 1));
const { poster_path, error } = await helper.fetchMovieFunction(randomMovie);
if (error) return console.log({ error });
setApiMovieResponse({ poster_path });
})();
}, [page]);
The callback itself shouldn't be async because that would make the callback return a promise and React expects a non-async function that is typically used to do some cleanup.
You will necessarily need to wrap the hook callback logic into an async function and invoke it. React hook callbacks cannot be asynchronous, but they can call asynchronous functions.
Also, since React state updates are asynchronously processed, you can't set the randomMovie value and expect to use it on the next line in the same callback scope. Split this out into a separate useEffect to set the randomMovie state when the page dependency updates, and use the randomMovie as the dependency for the main effect.
useEffect(() => {
setRandomMovie(Math.floor(Math.random() * (500 - 1) + 1));
}, [page]);
useEffect(() => {
const getMovies = async () => { // <-- declare async
const { poster_path, error } = await helper.fetchMovieFunction(randomMovie);
if (error) {
console.log({error});
} else {
setApiMovieResponse({poster_path});
}
};
if (randomMovie) {
getMovies(); // <-- invoke
}
}, [randomMovie]);
FYI
fetch already returns a Promise, so wrapping it in a Promise is superfluous. Since you are returning the Promise chain there is also nothing to await. You can return the fetch (and Promise chain).
fetchMovieFunction = (randomMovie) => {
return fetch(`${MOVIE_KEY}${randomMovie}?api_key=${API_KEY}`, this.myInit)
.then(response => return {
poster_path: response.poster_path
})
.catch(error => return { error });
}
In order to do so, It's not suggested to asynchronize a function as a callback function being used in useEffect() since Effect callbacks are synchronous to prevent race conditions.
the better approach would be inside the useEffect callback
check this out:
useEffect(() => {
async function [name] () {
.....
.....
}
[name]();
},string[])
fetchMovieFunction doesn't need to be async because you're already returning a promise. Instead just return the fetch (also a promise), and catch any errors from that call in that method:
fetchMovieFunction = (randomMovie) => {
try {
return fetch(`${MOVIE_KEY}${randomMovie}?api_key=${API_KEY}`, this.myInit)
} catch(err) {
console.log(err);
}
});
But your useEffect, or rather the function you should be calling within the useEffect, does need to be async (because you're using await, but now you can just pick up the data from the fetch when it resolves.
useEffect(() => {
async function getData() {
setRandomMovie(Math.floor(Math.random() * (500 - 1) + 1));
const { poster_path } = await helper.fetchMovieFunction(randomMovie);
setApiMovieResponse({ poster_path });
}
getData();
}, [page]);
Related
This is the code
function readNotes(){
return new Promise((resolve, reject) => {
user = firebase.auth().currentUser.uid
ref = database.ref("users/" + user + "/notes")
ref.get().then( function(snapshot) {
if (snapshot.exists()) {
keys= Object.keys(snapshot.val())
console.log(keys)
resolve(keys);
} else {
console.log("No data available");
}
}).catch((error) => {
reject(error);
})
})
}type here
I tried calling the function in the console and I was expecting for it to return a fulfilled promise, especially because I was able to log the value of the keys variable
Your function returns Promise. (hence return new Promise(...) at the beginning of your function);
You will need to either await (if you are inside an async function) like so:
const notes = await readNotes();
console.log(notes);
or you can use .then() like so:
readNotes().then(notes => {
console.log(notes)
}).catch(err => {
console.error(error);
}
Note: do not forget .catch to intercept errors.
If you are not in async function, but want to use async/await you can use an IIFE (Immediately Invoked Function Expression).
(async () => {
const notes = await readNotes();
console.log(notes);
})()
I want to test my code using JEST, but I'm having some issues. I want to check, if restart() function has been called.
My code works like this, it's waiting for the data, and if there's no data it's calling the same function again. Basically something like a loop.
myCode.js file:
module.exports = {
getSomething: async () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("");
}, 1000);
});
},
doSomething: async () => {
const data = await module.exports.getSomething();
if (!data) {
return module.exports.restart();
}
return data;
},
restart: async () => {
return module.exports.doSomething();
}
};
myCode.test.js file:
const myCode = require("./exampleCode")
describe("test", () => {
test("Is it doing something more than once?", async () => {
const restartSpy = jest.spyOn(myCode, 'restart');
myCode.doSomething()
expect(restartSpy).toHaveBeenCalledTimes(1);
})
})
My problem is that expect(restartSpy).toHaveBeenCalledTimes(1); is returning false.
The question is - what I'm doing wrong? Is there a way to test this code?
The main problem here is the lack of await before myCode.doSomething(). All your functions are asynchronous, so you need to wait for them to finish before checking the spy:
await myCode.doSomething();
Another issue is the fact that it's an infinite recursion loop - jest will timeout after 5000ms (by default) if you won't modify the code that is calling restart, for example:
doSomething: async (restartCounter = 0) => {
const data = await module.exports.getSomething();
if (!data && ++restartCounter < 2) {
return module.exports.restart(restartCounter);
}
return data;
},
restart: async (restartCounter) => {
return module.exports.doSomething(restartCounter);
}
Actually, I've found a workaround.
describe("test", () => {
test("Is it doing something more than once?", async () => {
myCode.restart = jest.fn()
const restartSpy = jest.spyOn(myCode, 'restart');
await myCode.doSomething()
expect(restartSpy).toHaveBeenCalledTimes(1);
})
})
I'm overwriting restart() function. So now, I'm able to add await to doSomething() function and it will no longer be inifinite loop. Now I can check if the restart function has been called
can someone explain to me how can I return a value from another component?
I tried the following:
const ReturnText = () => {
return 'Returend text'
}
export default ReturnText;
And i try to call it in Foo like this
import ReturnText from '../ReturnText'
let someText;
const Foo = (props) => {
someText = ReturnText()
console.log(someText) // is shown as undefined in the debugger
}
But when I try to log the someText variable I get undifend.
EDIT:
It seems the code above works. but maybe I oversimplified my issue:
Here is my actual code (that I thought is identical)
import Geolocation from "react-native-geolocation-service";
let hasLocationPermission = true;
const LocateMe = () => {
if (hasLocationPermission) {
Geolocation.getCurrentPosition(
(position) => {
console.log(position);
return position;
},
(error) => {
// See error code charts below.
console.log(error.code, error.message);
},
{ enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);
}
}
export default LocateMe;
I try to call the LocateMe in Foo and assign the returned position to a variable (ant that variable gives me undefined)
Because getCurrentPosition is an async process wrap the code in a promise and return that. It will resolve the promise with the data when the process is complete.
You can then decide if you want to use async/await or a traditional then to access the data when its returned.
function locateMe() {
const config = { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 };
return new Promise((res, rej) => {
function success(position) {
res(position);
}
function error(msg) {
console.log(msg);
}
if (hasLocationPermission) {
Geolocation.getCurrentPosition(success, error, config);
}
});
}
Either async/await:
(async () => {
const position = await locateMe();
console.log(position);
})();
Or then:
locateMe().then(coords => console.log(coords));
From what I see the problem is here that you try to return from a callback function Geolocation.getCurrentPosition which will do nothing and it is expected.
The thing is, if an inner function call is asynchronous, then all the functions 'wrapping' this call must also be asynchronous to 'return' a response.
To get the value from LocateMe I would pass the callback function as a parameter like:
const LocateMe = (callback) =>
And instead of
return position
You do
callback(position)
And then in Foo, you get that value and do whatever you need to do with it.
I am making an axios call from promise of another axios call, the code looks like below, the call is basically from the first method to the second method.
UPDATED CODE BASED ON SUGGESTION
It simply says: Can not use keyword 'await' outside an async function then I tried
var data = async () => {
await this.checkParentLoggerLevel();
};
still did not work
async updateLevel(logger, level, index) {
alert(index);
axios
.post(
'url'
)
.then(() => {
var data = await this.checkParentLoggerLevel();
alert('waiting');
alert(
'This will be executed before the second methods returns HEllo'
);
alert(data);
});
},
Second method:
async checkParentLoggerLevel() {
alert('inside checkParentLoggerLevel ');
return await axios
.get('url')
.then(() => {
alert('returning hello');
return 'hello';
});
},
My aim to to save the returned hello to data variable in first method.This is not working. The other problem is after the this.checkParentLoggerLevel() methods call code execution continues and does not wait for the retuned value.
This happens because inside checkParentLoggerLevel you are not waiting for the axios promise to complete. You can do it like:
async checkParentLoggerLevel() {
alert('inside checkParentLoggerLevel ');
return await axios
.get('url')
.then((res) => {
return 'hello';
});
}
Also, you need to await inside updateLevel like:
async updateLevel() {
axios
.post(url)
.then(async (res) => {
var data = await this.checkParentLoggerLevel();
alert("This will be executed before the second methods returns HEllo");
alert(data);
});
}
You should chain the promises, so:
updateLevel() {
axios
.post(url)
.then(res => {
return this.checkParentLoggerLevel.then(data => ([res, data]);
})
.then(([res, data]) => {
// here
});
}
Or simply with async await:
async updateLevel() {
const res = await axios.post(url);
const data = await this.checkParentLoggerLevel();
// Do whatever you want
}
I get problems with async/await functions and changing state in React.
This is my async function, which is triggered by clicking on the button:
async startNewEntry() {
this.addIssue();
let issue_id;
console.log(this.state.timeEntry, "started_timeEntry")
if (this.state.timeEntry?.issue?.id) {
issue_id = this.state.timeEntry?.issue?.id;
} else {
issue_id = (await this.issueService.list()).data[0]?.id;
}
const { data } = await this.timeEntryService.create({
comments: this.state.timeEntry.comments,
issue_id,
spent_on: moment(new Date()).format("YYYY-MM-DD"),
hours: 0.01,
activity_id: this.localStorageService.get("defaultActivityId")
});
In this function I use this.addIssue, which use this.createIssue, which changing my class component state:
addIssue() {
this.projectService.list([]).then(response => {
response.data = response.data.filter((x: any) => x.status === 1);
this.setState(
{
activeProjects: response.data
},
() => {
this.createIssue();
}
);
});
}
createIssue() {
this.issueAddService
.create({
project_id: this.state.activeProjects[0].id,
tracker_id: trakerId,
priority_id: priorityId,
subject: this.state.timeEntry.comments,
description: this.state.timeEntry.comments
})
.then(response => {
let timeEntry = this.state.timeEntry;
timeEntry.issue = response.data;
this.setState({
timeEntry
});
})
.catch(error => {
console.log("error", error);
});
}
As you can see, in my async function I new to have my new State, but actually async function works before my this.addIssue function. I know that question might be little freaky, but Thanks in forward!!
I am not a React expert, but I don't fully understand why there are lot of setState invocations spread around the place.
If you leave the setState to the end of the function, then you might not need to worry about correctly sequencing asynchronous calls to it (although the other answer does show how this can be achieved).
Perhaps invoking it once might make the code clearer. I welcome corrections...
async startNewEntry() {
const activeProjects = await fetchActiveProjects()
const issue = await this.createIssue()
const timeEntry = await createTimeEntry({ issue, comments: this.state.timeEntry.comments })
this.setState({ activeProjects, issue, timeEntry })
}
async fetchActiveProjects() {
const { data } = await this.projectService.list([])
return data.filter(({ status }) => status === 1)
}
async createIssue() {
const { data } = await this.issueAddService.create({
project_id: this.state.activeProjects[0].id,
tracker_id: trakerId,
priority_id: priorityId,
subject: this.state.timeEntry.comments,
description: this.state.timeEntry.comments
})
return data
}
async createTimeEntry({issue, comments}) {
const { data } = await this.timeEntryService.create({
comments,
issue_id: issue?.id || (await this.issueService.list()).data[0]?.id,
spent_on: moment(new Date()).format("YYYY-MM-DD"),
hours: 0.01,
activity_id: this.localStorageService.get("defaultActivityId")
})
return data
}
You can probably speed this up further by parallelizing the first two async calls:
async startNewEntry() {
const [activeProjects, issue] =
await Promise.all([fetchActiveProjects(), this.createIssue()])
const timeEntry = await createTimeEntry({ issue, comments: this.state.timeEntry.comments })
this.setState({ activeProjects, issue, timeEntry })
}
If you want startNewEntry to wait to do its work until after addIssue has done its work, you need to:
Have addIssue return a promise it fulfills when it's finished its work, and
Use await when calling it: await this.addIssue();
If you need startNewEntry to see the updated state, addIssue's promise will need to be fulfilled from the state completion handler callback, like this:
addIssue() {
// *** Return the promise chain to the caller
return this.projectService.list([]).then(response => {
response.data = response.data.filter((x: any) => x.status === 1);
// *** Create a new promise
return new Promise(resolve => {
this.setState(
{
activeProjects: response.data
},
() => {
this.createIssue();
resolve(); // *** Fulfill the promise
}
);
});
});
}
Often, new Promise is an anti-pattern, particularly when you have another promise you can chain from. But in this case, since you need to wait for the callback from setState (which isn't promise-enabled), it's appropriate. (
Note my comment on the question. I think you're setting up an endless loop...