I had 3 APIs need to called one after one

Question

I create reactjs app when user ask for login I send three request

getToken();
createLogWithToken();
createRequestwithLog();

every function depend on the pervious one here is my code

getToken = async (){
axios.post('getToken')
  .then(response => {
    this.setState({ token: response.data.token });
  })
} 
createLogWithToken = async (){
axios.post('createLogWithToken',{token:this.state.token})
  .then(response => {
    this.setState({ log_id: response.data.log_id });
  })
}  
createRequestwithLog = async (){
axios.post('createRequestwithLog',{token:this.state.token, log_id: this.state.log_id})
  .then(response => {
    this.setState({ request_id: response.data.request_id });
  })
} 
onPress = async () =>{
await this.getToken();
await this.createLogWithToken();
await this.createRequestwithLog();
}

I got error on the second commands as the required parameters is null How can I call then and await till the the setstate done

Edit >> I changed my code to be

getToken = async (){
await axios.post('getToken')
  .then(response => {
    this.setState({ token: response.data.token });
    return (response.data.token);
  })
} 
createLogWithToken = async (token){
await axios.post('createLogWithToken',{token})
  .then(response => {
    this.setState({ log_id: response.data.log_id });
    return response.data.log_id;
  })
}  
createRequestwithLog = async (token, log_id){
await axios.post('createRequestwithLog',{token, log_id})
  .then(response => {
    this.setState({ request_id: response.data.request_id });
    return response.data.request_id;
  })
} 
onPress = async () =>{
let token = await this.getToken();
let log = await this.createLogWithToken(token);
let request = await this.createRequestwithLog(token,log);
}

but I still get error that token undefine

The state value won't update in the same function call (`onPress`). I'd recommend returning the values needed in the next call from each function. For example `getToken` can return the token and then pass that token to `createLogWithToken`. — Henry Woody, Jun 22 '22 at 00:33
Also your `await`s aren't really doing anyting since the function's themselves don't wait for promises to resolve. If you make these functions return a value I believe you will also fix this issue at the same time. — Henry Woody, Jun 22 '22 at 00:35

score 1 · Answer 1 · answered Jun 22 '22 at 00:40

1

Several things:

The functions you are awaiting aren't "awaitable". You need to return a promise.
You can just await your axios calls directly like this const token = await axios.post...
setState isn't synchronous. You don't know if it's defined by the time you call the next endpoint. You should just set them in normal variables. If you also need them as state, you can do that too, but it doesn't look necessary

answered Jun 22 '22 at 00:40

Cyrus

613
1
6
22

still the same error after update the code – fatma mahmoud Jun 22 '22 at 11:47

score 0 · Accepted Answer · answered Jun 22 '22 at 00:41

See How to structure nested Promises

fetch(url)
.then(function(response) { 
  return response.json()
})
.then(function(data) {   
  // do stuff with `data`, call second `fetch`
  return fetch(data.anotherUrl)
})
.then(function(response) { 
  return response.json(); 
})
.then(function(data) {
  // do stuff with `data`
})
.catch(function(error) { 
  console.log('Requestfailed', error) 
});

score 0 · Answer 3 · answered Jun 22 '22 at 00:51

getToken = async () {
  const token = (await axios.post('getToken')).data.token;
  this.setState({ token });
  return token;
}

createLogWithToken = async (token) {
  const logId = (await axios.post('createLogWithToken',{ token })).data.log_id;
  this.setState({ log_id: logId });
  return logId;
}

createRequestwithLog = async (token, logId) {
  const requestId = (await axios.post('createRequestwithLog',{ token, log_id: logId })).data.request_id;
  this.setState({ request_id: requestId});
} 

onPress = async () => {
const token = await this.getToken();
const logId = await this.createLogWithToken(token);
this.createRequestwithLog(token, logId);
}

I update the code but still the same error – fatma mahmoud Jun 22 '22 at 11:48 — fatma mahmoud, Jun 22 '22 at 11:48

I had 3 APIs need to called one after one

3 Answers3