score:0
you can not chain axios requests one to another, you need to make a seperate request per api resource you want to get, here is how you can get 2 requests in the same component
useeffect(() => {
const requestoptions = {
method: "get",
headers: {
"content-type": "application/json",
authorization:json.parse(localstorage.getitem("tokentype")) + " " + json.parse(localstorage.getitem("accesstoken")),
},
};
axios
.get("/users", requestoptions)
.then((response) => {
setusers(response.data);
setisloading(true);
})
.catch((err) => alert(err));
axios
.get("/groups", requestoptions)
.then((response) => {
setrenderedusers(response.data);
setisloading(true);
})
.catch((err) => alert(err));
}, []);
score:1
you can use this pattern:
axios.all([requestone, requesttwo, requestthree]).then(axios.spread((...responses) => {
const responseone = responses[0]
const responsetwo = responses[1]
const responesthree = responses[2]
// use/access the results
})).catch(errors => {
// react on errors.
})
score:1
just use promise.all()
here.
useeffect(() => {
const requestoptions = {
method: "get",
headers: {
"content-type": "application/json",
authorization:json.parse(localstorage.getitem("tokentype")) + " " + json.parse(localstorage.getitem("accesstoken")),
},
};
promise.all([
axios.get("/users", requestoptions),
axios.get('/groups', requestoptions)
])
.then(([usersresponse, groupsresponse]) => {
setusers(usersresponse);
setrenderedusers(groupsresponse);
setisloading(true); // probably setloading(false) here?
})
.catch((err) => alert(err));
}, []);
score:1
the pattern to make multiple axios calls is like this:
axios.all([
axios.get('http://google.com'),
axios.get('http://apple.com')
])
.then(axios.spread((googleres, appleres) => {
// do something with both responses
});
so your fixed example will be like this:
axios.all([
axios.get("/users", requestoptions)
axios.get("/groups", requestoptions)
])
.then(axios.spread((usersres, groupsres) => {
setusers(usersres.data);
setrenderedusers(groupsres.data); // should it be users from groups? just set it to what you need
setisloading(true);
});
Source: stackoverflow.com
Related Query
- How to get data from two endpoints in 1 component?
- How do I get the Age data from child to parent component
- reactjs - how to get data from a child component into onclick of a button passed in props?
- How to get data from table row click using Semantic's React Table Component
- How to access data from get request made by a React functional component to localhost server using Axios?
- how to get, by a get from axios, data in useState with react functionnal component
- How a child component can get several props/data from two separate parent components
- how to get the data from child component in stepper in react material ui?
- In a react components, how to get latest data from state once it is changed from another component using redux?
- how to get the data from a component within a form in react
- How do I get data from Axios and return it from a Function Component in React?
- How to get data from one object when mapped two objects based on its id?
- How to get data from multiple child component in ReactJS
- how can i get input data from two dynamic form in react class component?
- How to get data from object and put the this data in a linechart component
- How to get the data from dropdown component in React and update state?
- How to get data from an object with arrays/strings and then pass that data to a React component
- How to pass data from child component to its parent in ReactJS?
- How get data from material-ui TextField, DropDownMenu components?
- How to get the data from React Context Consumer outside the render
- How to get refs from another component in React JS
- How to import two component but same name from two libraries?
- How to get value from Select/Option component from Ant design
- How to get value from a react function within a react component
- How can I get data from a local file into my React app?
- How to get data from JSON with Axios?
- How can I prevent a component from rendering before data is loaded?
- How to get Redux Form data in another Component
- How to get form data from input fields in React
- Gatsby + Markdown: How to get data from a specific markdown file into a single page?
More Query from same tag
- React Portal input change removes elements
- String displayed but undefined in my console and condition?
- When does React re-render child component?
- Convert A function react component To a react class To Add ref attribute
- Mobile browser positions elements as if the view is 360px wide, but renders images on the page at a higher resolution. How does this work?
- react routing - rendering error (single page application)
- is there a way to keep router query on page refresh in nextjs
- Issue with async value for React context not available from child component
- Cannot find type definition file for 'bson'. The file is in the program because: Entry point for implicit type library 'bson'
- Is React always visible in the source code?
- ReactJS | Cannot get data on ComponentDidMount
- Gatsby conditional className based on frontmatter
- How to cancel mutlicall of componentDidMount() in ReactJS component?
- React - How to run a node_modules package at compile/build time instead of run time?
- React DataTable fails to change the font-size
- Typerror: object is not a function or its return value is not iterable in react 16.13.1
- React onClick inside onClick
- Cannot read property 'params' of undefined while retrieving the data by id
- state data still keeps the previous state even after setState
- Change button bgcolor depends on props
- My reducer keeps on overwriting the value
- pass argument to redux action from component while it's rendering
- React - State Error when loading image
- Making fetch API work with CORS after OPTIONS response
- Creating custom absolute paths with create-react-app
- How to set a value by id in react?
- Why cant we print a variable with html names included in it?
- reactjs onChange firing callbacks
- How to pass in a variable when setting state in react?
- Play video from React