Mixing
Using Async/Await in ES6 React .JS
I have a NetCore2 app with ReactJS installed.
My React app does something like this ->
- User inputs into a field
- axios makes a call to an api to get the user and/or list of users
- The input field shows suggestions based on what was saved in PeopleList state.
I'm using Office Fabric UI React - People Picker (in case it matters).
My problem here is that i have no idea how i could use async/await in my code.
If i put something like this
async asynconFilterChanged = (filterText, currentPersonas, limitResults) => {
VS Code throws an error telling me that async is only for .ts files. Also if i use await in any other functions i will get an error such as await is a reserved word.
As far as i know async/await is not TS only...(or am i wrong?).
I'm using the older Babel with the ENV preset.
Let me know if i need to provide more code, but TLDR what i want is to only start the filter function after my axios is done pushing items into the PeopleList state (array of objects).
Thanks!
javascript reactjs asynchronous async-await
asked Nov 21 '18 at 13:35
Dante R.Dante R.
242114
add a comment |
I have a NetCore2 app with ReactJS installed.
My React app does something like this ->
- User inputs into a field
- axios makes a call to an api to get the user and/or list of users
- The input field shows suggestions based on what was saved in PeopleList state.
I'm using Office Fabric UI React - People Picker (in case it matters).
My problem here is that i have no idea how i could use async/await in my code.
If i put something like this
async asynconFilterChanged = (filterText, currentPersonas, limitResults) => {
VS Code throws an error telling me that async is only for .ts files. Also if i use await in any other functions i will get an error such as await is a reserved word.
As far as i know async/await is not TS only...(or am i wrong?).
I'm using the older Babel with the ENV preset.
Let me know if i need to provide more code, but TLDR what i want is to only start the filter function after my axios is done pushing items into the PeopleList state (array of objects).
Thanks!
javascript reactjs asynchronous async-await
asked Nov 21 '18 at 13:35
Dante R.Dante R.
242114
add a comment |
I have a NetCore2 app with ReactJS installed.
My React app does something like this ->
- User inputs into a field
- axios makes a call to an api to get the user and/or list of users
- The input field shows suggestions based on what was saved in PeopleList state.
I'm using Office Fabric UI React - People Picker (in case it matters).
My problem here is that i have no idea how i could use async/await in my code.
If i put something like this
async asynconFilterChanged = (filterText, currentPersonas, limitResults) => {
VS Code throws an error telling me that async is only for .ts files. Also if i use await in any other functions i will get an error such as await is a reserved word.
As far as i know async/await is not TS only...(or am i wrong?).
I'm using the older Babel with the ENV preset.
Let me know if i need to provide more code, but TLDR what i want is to only start the filter function after my axios is done pushing items into the PeopleList state (array of objects).
Thanks!
javascript reactjs asynchronous async-await
asked Nov 21 '18 at 13:35
Dante R.Dante R.
242114
I have a NetCore2 app with ReactJS installed.
My React app does something like this ->
- User inputs into a field
- axios makes a call to an api to get the user and/or list of users
- The input field shows suggestions based on what was saved in PeopleList state.
I'm using Office Fabric UI React - People Picker (in case it matters).
My problem here is that i have no idea how i could use async/await in my code.
If i put something like this
async asynconFilterChanged = (filterText, currentPersonas, limitResults) => {
VS Code throws an error telling me that async is only for .ts files. Also if i use await in any other functions i will get an error such as await is a reserved word.
As far as i know async/await is not TS only...(or am i wrong?).
I'm using the older Babel with the ENV preset.
Let me know if i need to provide more code, but TLDR what i want is to only start the filter function after my axios is done pushing items into the PeopleList state (array of objects).
Thanks!
javascript reactjs asynchronous async-await
javascript reactjs asynchronous async-await
asked Nov 21 '18 at 13:35
Dante R.Dante R.
242114
asked Nov 21 '18 at 13:35
Dante R.Dante R.
242114
asked Nov 21 '18 at 13:35
Dante R.Dante R.
242114
asked Nov 21 '18 at 13:35
Dante R.Dante R.
242114
asked Nov 21 '18 at 13:35
Dante R.Dante R.
242114
242114
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
When using an arrow function you should write async/await like this:
const asynconFilteredChanged = async () => {
// code here
}
Check out Syntax for async arrow function
answered Nov 21 '18 at 13:41
DmitriyDmitriy
610215
Seems to partially work, however babel still throws the "await is a reserved word" error even tho the "awaited" function has been transformed to async. Any tip on that? Also any idea where would be the best place to place the const function ? Wouldrender() {}be ok? Thanks! EDIT: It seems moving it out of setTimeout stopped the "await" error. I assume you can't use await and timeout at the same time.
– Dante R.
Nov 22 '18 at 8:15
add a comment |
As per syntax try to follow above codebase,
asynconFilterChanged = async (filterText, currentPersonas, limitResults) => {
try {
await yourFucntion = (limitResults) => {
....Your logic...
}
} catch(error) {
console.error(error);
}
Yes, try to use and touch async-await guide
answered Nov 22 '18 at 13:12
Anupam MauryaAnupam Maurya
165110
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413266%2fusing-async-await-in-es6-react-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
When using an arrow function you should write async/await like this:
const asynconFilteredChanged = async () => {
// code here
}
Check out Syntax for async arrow function
answered Nov 21 '18 at 13:41
DmitriyDmitriy
610215
Seems to partially work, however babel still throws the "await is a reserved word" error even tho the "awaited" function has been transformed to async. Any tip on that? Also any idea where would be the best place to place the const function ? Wouldrender() {}be ok? Thanks! EDIT: It seems moving it out of setTimeout stopped the "await" error. I assume you can't use await and timeout at the same time.
– Dante R.
Nov 22 '18 at 8:15
add a comment |
When using an arrow function you should write async/await like this:
const asynconFilteredChanged = async () => {
// code here
}
Check out Syntax for async arrow function
answered Nov 21 '18 at 13:41
DmitriyDmitriy
610215
Seems to partially work, however babel still throws the "await is a reserved word" error even tho the "awaited" function has been transformed to async. Any tip on that? Also any idea where would be the best place to place the const function ? Wouldrender() {}be ok? Thanks! EDIT: It seems moving it out of setTimeout stopped the "await" error. I assume you can't use await and timeout at the same time.
– Dante R.
Nov 22 '18 at 8:15
add a comment |
When using an arrow function you should write async/await like this:
const asynconFilteredChanged = async () => {
// code here
}
Check out Syntax for async arrow function
answered Nov 21 '18 at 13:41
DmitriyDmitriy
610215
When using an arrow function you should write async/await like this:
const asynconFilteredChanged = async () => {
// code here
}
Check out Syntax for async arrow function
answered Nov 21 '18 at 13:41
DmitriyDmitriy
610215
answered Nov 21 '18 at 13:41
DmitriyDmitriy
610215
answered Nov 21 '18 at 13:41
DmitriyDmitriy
610215
answered Nov 21 '18 at 13:41
DmitriyDmitriy
610215
610215
Seems to partially work, however babel still throws the "await is a reserved word" error even tho the "awaited" function has been transformed to async. Any tip on that? Also any idea where would be the best place to place the const function ? Wouldrender() {}be ok? Thanks! EDIT: It seems moving it out of setTimeout stopped the "await" error. I assume you can't use await and timeout at the same time.
– Dante R.
Nov 22 '18 at 8:15
add a comment |
Seems to partially work, however babel still throws the "await is a reserved word" error even tho the "awaited" function has been transformed to async. Any tip on that? Also any idea where would be the best place to place the const function ? Wouldrender() {}be ok? Thanks! EDIT: It seems moving it out of setTimeout stopped the "await" error. I assume you can't use await and timeout at the same time.
– Dante R.
Nov 22 '18 at 8:15
Seems to partially work, however babel still throws the "await is a reserved word" error even tho the "awaited" function has been transformed to async. Any tip on that? Also any idea where would be the best place to place the const function ? Would
render() {} be ok? Thanks! EDIT: It seems moving it out of setTimeout stopped the "await" error. I assume you can't use await and timeout at the same time.– Dante R.
Nov 22 '18 at 8:15
Seems to partially work, however babel still throws the "await is a reserved word" error even tho the "awaited" function has been transformed to async. Any tip on that? Also any idea where would be the best place to place the const function ? Would
render() {} be ok? Thanks! EDIT: It seems moving it out of setTimeout stopped the "await" error. I assume you can't use await and timeout at the same time.– Dante R.
Nov 22 '18 at 8:15
add a comment |
As per syntax try to follow above codebase,
asynconFilterChanged = async (filterText, currentPersonas, limitResults) => {
try {
await yourFucntion = (limitResults) => {
....Your logic...
}
} catch(error) {
console.error(error);
}
Yes, try to use and touch async-await guide
answered Nov 22 '18 at 13:12
Anupam MauryaAnupam Maurya
165110
add a comment |
As per syntax try to follow above codebase,
asynconFilterChanged = async (filterText, currentPersonas, limitResults) => {
try {
await yourFucntion = (limitResults) => {
....Your logic...
}
} catch(error) {
console.error(error);
}
Yes, try to use and touch async-await guide
answered Nov 22 '18 at 13:12
Anupam MauryaAnupam Maurya
165110
add a comment |
As per syntax try to follow above codebase,
asynconFilterChanged = async (filterText, currentPersonas, limitResults) => {
try {
await yourFucntion = (limitResults) => {
....Your logic...
}
} catch(error) {
console.error(error);
}
Yes, try to use and touch async-await guide
answered Nov 22 '18 at 13:12
Anupam MauryaAnupam Maurya
165110
As per syntax try to follow above codebase,
asynconFilterChanged = async (filterText, currentPersonas, limitResults) => {
try {
await yourFucntion = (limitResults) => {
....Your logic...
}
} catch(error) {
console.error(error);
}
Yes, try to use and touch async-await guide
answered Nov 22 '18 at 13:12
Anupam MauryaAnupam Maurya
165110
answered Nov 22 '18 at 13:12
Anupam MauryaAnupam Maurya
165110
answered Nov 22 '18 at 13:12
Anupam MauryaAnupam Maurya
165110
answered Nov 22 '18 at 13:12
Anupam MauryaAnupam Maurya
165110
165110
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413266%2fusing-async-await-in-es6-react-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
