How to use axios.all or promise.all to call all ajax calls just once? React
0
I have some AJAX calls using axios, and I want to change the state of all only when the last axios call is finished, I tried to use axios.all but I could not, could anyone help me?
The call:
export default class TeamStatus extends React.Component {
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
axios.get(`/api/wfmskills/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalSkills: res.data.count
)
)
axios.get(`/api/notupdated/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalNotUpdated: res.data.count
)
)
axios.get(`/api/updated2017/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2017: res.data.count
)
)
axios.get(`/api/updated2016/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2016: res.data.count
)
)
axios.get(`/api/updated2018/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2018: res.data.count,
);
)
So, i have 5 calls, and i want to change the state (update2018,2017,2016,totalSkills and notUpdate) when the last to finish (api/update2018)
Someone could help me? PLEASE???
reactjs promise axios
asked Nov 11 at 0:02
Jean
356
add a comment |Â
0
I have some AJAX calls using axios, and I want to change the state of all only when the last axios call is finished, I tried to use axios.all but I could not, could anyone help me?
The call:
export default class TeamStatus extends React.Component {
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
axios.get(`/api/wfmskills/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalSkills: res.data.count
)
)
axios.get(`/api/notupdated/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalNotUpdated: res.data.count
)
)
axios.get(`/api/updated2017/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2017: res.data.count
)
)
axios.get(`/api/updated2016/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2016: res.data.count
)
)
axios.get(`/api/updated2018/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2018: res.data.count,
);
)
So, i have 5 calls, and i want to change the state (update2018,2017,2016,totalSkills and notUpdate) when the last to finish (api/update2018)
Someone could help me? PLEASE???
reactjs promise axios
asked Nov 11 at 0:02
Jean
356
add a comment |Â
0
0
0
I have some AJAX calls using axios, and I want to change the state of all only when the last axios call is finished, I tried to use axios.all but I could not, could anyone help me?
The call:
export default class TeamStatus extends React.Component {
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
axios.get(`/api/wfmskills/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalSkills: res.data.count
)
)
axios.get(`/api/notupdated/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalNotUpdated: res.data.count
)
)
axios.get(`/api/updated2017/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2017: res.data.count
)
)
axios.get(`/api/updated2016/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2016: res.data.count
)
)
axios.get(`/api/updated2018/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2018: res.data.count,
);
)
So, i have 5 calls, and i want to change the state (update2018,2017,2016,totalSkills and notUpdate) when the last to finish (api/update2018)
Someone could help me? PLEASE???
reactjs promise axios
asked Nov 11 at 0:02
Jean
356
I have some AJAX calls using axios, and I want to change the state of all only when the last axios call is finished, I tried to use axios.all but I could not, could anyone help me?
The call:
export default class TeamStatus extends React.Component {
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
axios.get(`/api/wfmskills/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalSkills: res.data.count
)
)
axios.get(`/api/notupdated/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalNotUpdated: res.data.count
)
)
axios.get(`/api/updated2017/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2017: res.data.count
)
)
axios.get(`/api/updated2016/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2016: res.data.count
)
)
axios.get(`/api/updated2018/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2018: res.data.count,
);
)
So, i have 5 calls, and i want to change the state (update2018,2017,2016,totalSkills and notUpdate) when the last to finish (api/update2018)
Someone could help me? PLEASE???
export default class TeamStatus extends React.Component {
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
axios.get(`/api/wfmskills/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalSkills: res.data.count
)
)
axios.get(`/api/notupdated/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalNotUpdated: res.data.count
)
)
axios.get(`/api/updated2017/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2017: res.data.count
)
)
axios.get(`/api/updated2016/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2016: res.data.count
)
)
axios.get(`/api/updated2018/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2018: res.data.count,
);
)
export default class TeamStatus extends React.Component {
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
axios.get(`/api/wfmskills/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalSkills: res.data.count
)
)
axios.get(`/api/notupdated/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
totalNotUpdated: res.data.count
)
)
axios.get(`/api/updated2017/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2017: res.data.count
)
)
axios.get(`/api/updated2016/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2016: res.data.count
)
)
axios.get(`/api/updated2018/$props.managerStatusFiltered/$props.cityStatusFiltered/$props.countryStatusFiltered/$props.squadNameStatusFiltered/$props.domainStatusFiltered/$props.subdomainStatusFiltered`)
.then(res =>
this.setState(
updated2018: res.data.count,
);
)
reactjs promise axios
reactjs promise axios
asked Nov 11 at 0:02
Jean
356
asked Nov 11 at 0:02
Jean
356
asked Nov 11 at 0:02
Jean
356
asked Nov 11 at 0:02
Jean
356
asked Nov 11 at 0:02
Jean
356
356
add a comment |Â
add a comment |Â
1 Answer
1
active
oldest
votes
1
Here is a quick way to wrap all your promises in 1 promise all, and then when all of them complete, it will trigger 1 setState. This will allow you to execute code after all 5 are done completing.
export default class TeamStatus extends React.Component
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
const managerStatusFiltered, cityStatusFiltered, countryStatusFiltered, squadNameStatusFiltered
Promise.all([
axios.get(`/example1`),
axios.get(`/example2`),
axios.get(`/example3`),
axios.get(`/example4`),
axios.get(`/example5`),
]).then(([res1, res2, res3, res4, res5]) =>
this.setState(
totalSkills: res1.data.count,
totalNotUpdated: res2.data.count,
updated2017: res3.data.count,
updated2016: res4.data.count,
updated2018: res5.data.count
);
);
answered Nov 11 at 1:00
Naismith
1356
thank you very much, your answer helped me a lot
– Jean
Nov 11 at 1:39
add a comment |Â
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Here is a quick way to wrap all your promises in 1 promise all, and then when all of them complete, it will trigger 1 setState. This will allow you to execute code after all 5 are done completing.
export default class TeamStatus extends React.Component
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
const managerStatusFiltered, cityStatusFiltered, countryStatusFiltered, squadNameStatusFiltered
Promise.all([
axios.get(`/example1`),
axios.get(`/example2`),
axios.get(`/example3`),
axios.get(`/example4`),
axios.get(`/example5`),
]).then(([res1, res2, res3, res4, res5]) =>
this.setState(
totalSkills: res1.data.count,
totalNotUpdated: res2.data.count,
updated2017: res3.data.count,
updated2016: res4.data.count,
updated2018: res5.data.count
);
);
answered Nov 11 at 1:00
Naismith
1356
thank you very much, your answer helped me a lot
– Jean
Nov 11 at 1:39
add a comment |Â
1
Here is a quick way to wrap all your promises in 1 promise all, and then when all of them complete, it will trigger 1 setState. This will allow you to execute code after all 5 are done completing.
export default class TeamStatus extends React.Component
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
const managerStatusFiltered, cityStatusFiltered, countryStatusFiltered, squadNameStatusFiltered
Promise.all([
axios.get(`/example1`),
axios.get(`/example2`),
axios.get(`/example3`),
axios.get(`/example4`),
axios.get(`/example5`),
]).then(([res1, res2, res3, res4, res5]) =>
this.setState(
totalSkills: res1.data.count,
totalNotUpdated: res2.data.count,
updated2017: res3.data.count,
updated2016: res4.data.count,
updated2018: res5.data.count
);
);
answered Nov 11 at 1:00
Naismith
1356
thank you very much, your answer helped me a lot
– Jean
Nov 11 at 1:39
add a comment |Â
1
1
1
Here is a quick way to wrap all your promises in 1 promise all, and then when all of them complete, it will trigger 1 setState. This will allow you to execute code after all 5 are done completing.
export default class TeamStatus extends React.Component
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
const managerStatusFiltered, cityStatusFiltered, countryStatusFiltered, squadNameStatusFiltered
Promise.all([
axios.get(`/example1`),
axios.get(`/example2`),
axios.get(`/example3`),
axios.get(`/example4`),
axios.get(`/example5`),
]).then(([res1, res2, res3, res4, res5]) =>
this.setState(
totalSkills: res1.data.count,
totalNotUpdated: res2.data.count,
updated2017: res3.data.count,
updated2016: res4.data.count,
updated2018: res5.data.count
);
);
answered Nov 11 at 1:00
Naismith
1356
Here is a quick way to wrap all your promises in 1 promise all, and then when all of them complete, it will trigger 1 setState. This will allow you to execute code after all 5 are done completing.
export default class TeamStatus extends React.Component
state =
updated2018: "",
updated2017: "",
updated2016: "",
totalSkills: "",
totalNotUpdated: "",
componentWillReceiveProps(props)
const firstName = localStorage.getItem('nameLoggedUser');
const lastName = localStorage.getItem('lastNameLoggedUser');
const fullName = `$firstName $lastName`.toLowerCase();
const loggedUserIs = localStorage.getItem("user-role");
if (loggedUserIs === 'full')
const managerStatusFiltered, cityStatusFiltered, countryStatusFiltered, squadNameStatusFiltered
Promise.all([
axios.get(`/example1`),
axios.get(`/example2`),
axios.get(`/example3`),
axios.get(`/example4`),
axios.get(`/example5`),
]).then(([res1, res2, res3, res4, res5]) =>
this.setState(
totalSkills: res1.data.count,
totalNotUpdated: res2.data.count,
updated2017: res3.data.count,
updated2016: res4.data.count,
updated2018: res5.data.count
);
);
answered Nov 11 at 1:00
Naismith
1356
answered Nov 11 at 1:00
Naismith
1356
answered Nov 11 at 1:00
Naismith
1356
answered Nov 11 at 1:00
Naismith
1356
1356
thank you very much, your answer helped me a lot
– Jean
Nov 11 at 1:39
add a comment |Â
thank you very much, your answer helped me a lot
– Jean
Nov 11 at 1:39
thank you very much, your answer helped me a lot
– Jean
Nov 11 at 1:39
thank you very much, your answer helped me a lot
– Jean
Nov 11 at 1:39
add a comment |Â
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53244628%2fhow-to-use-axios-all-or-promise-all-to-call-all-ajax-calls-just-once-react%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
