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

CodePudding user response：

Several things:

1. The functions you are awaiting aren't "awaitable". You need to return a promise.

2. You can just await your axios calls directly like this const token = await axios.post...

3. 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

CodePudding user response：

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) 
});

CodePudding user response：

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);
}