score:5
make the second call inside a .then chained to the end of the first promise chain ... in simple terms, chain your promises
something like
useeffect(() => axios.get(`firsturl`)
.then(response => {
setcasesheaderfields(response.data.result.fields);
return response.data.result.fields;
})
.then(casesheaderfields => axios.get(`url${casesheaderfields}`))
.then(response => {
setcasesfields(response.data.result.record_set);
}), []);
score:1
you can write something like this:
useeffect(() => {
return axios
.get(`firsturl`)
.then(response => {
return response.data.result.field
}).then(result => {
return axios.get(`url${result}`)
});
});
with async / await :
useeffect(async () => {
const result1 = await axios
.get(`firsturl`)
.then(response => {
return response.data.result.field
});
const result2 = await axios.get(`url${result1}`)
return result2
});
score:2
you can use async/await
to relieve the mess.
useeffect(async () => {
const response = await axios.get(`firsturl`)
const result = await axios.get(`url${response.data.result.fields}`)
console.log(result.data)
})
score:3
the queries result1
and result2
look sequential but there are simultaneous. in other words, result2
doesn't wait for result1
to finish before being executed.
here is a working example to chain promises using async/await:
useeffect(async () => {
try {
// make a first request
const result1 = await axios.get(`firsturl`);
setcasesheaderfields(result1.data.result.fields);
// use resutlt in the second request
const result2 = await axios.get(`url${"some params from result1"}`);
setcasesfields(result2.data.result.record_set);
} catch (e) {
// handle error here
}
}, []);
edit
based on comments, here is a best way to use async with useeffect without warning in the console:
useeffect(() => {
const fetchdata = async () => {
try {
// make a first request
const result1 = await axios.get(`firsturl`);
setcasesheaderfields(result1.data.result.fields);
// use resutlt in the second request
const result2 = await axios.get(`url${casesheaderfields}`);
setcasesfields(result2.data.result.record_set);
} catch (e) {
// handle error here
}
};
fetchdata();
}, []);
score:8
you can chain the results as they are regular promises: ref
axios.get(...)
.then((response) => {
return axios.get(...); // using response.data
})
.then((response) => {
console.log('response', response);
});
Source: stackoverflow.com
Related Query
- How to make a second API call based on the first response?
- Make a second API call based on first api call response in React with hooks
- React.JS, how to edit the response of a first API call with data from a second API call?
- How to make a second api call with data received from the first api call in Apollo client with React?
- How to Make A second API call based on the value gotten from the first. with React and useEffect hooks
- How can I make a request to an API based on the response from another request? React Hook "useSwr" cannot be called inside a callback
- How do I use the returned value from the first API call as a parameter to the second API call?
- Fetching the data from second api based on the response from the first api React js
- Make second api call when there is no error on the first using Axios in React
- Make API request for each array element based on the first API response
- ReactJS: How to make a component call a method only the very first it is rendered?
- How to make the API call and display it in React JS using React Table and Axios?
- React hooks useEffect call API second time and first time calling API response also returning
- Make 2nd API calls when all contents are loaded (lazy loading) from the first API call in React js
- making second api call after getting data from the first api
- How to show success or error message based on the response of the api in React js
- how to call an API and populate the response in React
- When using aws amplify on react to make an call to api gateway, how do i go about getting the statuscode as well?
- How to make api call in react function based view
- How to fetch sequence api calls where second api call need particular data from first api call result using react hooks?
- axios call getting response from first api and passing into second api
- How can I correctly make the fetch api call in react?
- How to get data from Api first and then call the my function?
- how to make api response not be the same as previous result in React JS
- When flex column wraps, how can I make the second column not take up the full height of the first column?
- How to make api call and populate in render in react function based view
- How to make two Get requests, the second one can only be made after the return of the first one?
- How to get the response JSON from API call
- I have problem to render data after API fetch because I have two apis and the second api call depend on first api ID
- How to make a further API call with data from first API call?
More Query from same tag
- ReactJS How to render 4 items in a row (items from api)
- Why does typescript infer a default prop when we dynamically import a javascript file which does not have a default export
- react-router-dom noMatch not working correctly
- Generate coverage with Mocha and Istanbul
- How to test if canvas is filled with given colour?
- Is it possible to use React in Django project "partially"?
- How to create generic function Component
- TypeError: this.props. is undefined
- Conditionally pass a Boolean prop with a dynamic prop name to a React component
- React - console warnings & errors
- I'm creating a function where non Login user cant add to cart
- Is it possible to make SVG equal to path?
- How to prevent reloading the entire component on updating some firestore documents?
- Redux form - passing a function as a property to a field array gives undefined
- React DOM gets rendered before the ajax request
- Failed to load plugin import: 'eslint-plugin-import'
- $gte & $lte is not working as expected in Mongoose/MongoDB
- implementing the render method in react.js
- New browser tab doesn't load styled components
- Semantic UI React - populate dropdown with remote content
- Can't access this.state in other function
- ReactJS: net::ERR_HTTP2_PROTOCOL_ERROR 200 with .NetCore in HTTPS
- How to fix 'React: Expected an assignment or function call and instead saw an expression'( state assignment)?
- React ● I want to convert a react-component to a JPG or PNG
- pass data from child component to another child component via parent component in react
- How to handle concurrency issue gracefully
- Rendering new line or line breaks in a template literal?
- Opening a new window without an address bar in react js
- Unable to update state by fetching data from external API
- TS2339 Typescript error but unsure why... property does not exist on type