Make Multiple Post Requests In Axios then get all the response to make another request

Question

i have already make 2 request.., but i want to make a patch request using the id from each response...

the other one will be put in the first one and the second one will be in the data

can we maybe pass it to the var ? idk how to do that..

for reference i use gatsbyjs and i use directusCMS

let url3 = `${process.env.GATSBY_DIRECTUS_API_URL}/gemaclc/items/pendaftar/:id (the id should be from the first response that we just made)?access_token=${process.env.GATSBY_DIRECTUS_TOKEN}`;

axios.patch(url3, data, {
    
    data: JSON.stringify(
    {
        featured_image: 1 (id of the second response whcih is an image),
        
    
    }), 
})

event.preventDefault();

const data = new FormData() 
data.append('file', this.state.selectedFile)
console.warn(this.state.selectedFile);
console.log(data);

// console.log("User Email :"  + this.state.email)
// console.log("User nama :"  + this.state.name)
// console.log("User telepon :"  + this.state.telepon)
// console.log("User program :"  + JSON.stringify([this.state.program]))
// console.log("User tanggal :"  + this.state.tanggal_lahir)
// console.log("User tempat :"  + this.state.tempat_lahir)

let url = `${process.env.GATSBY_DIRECTUS_API_URL}/gemaclc/items/pendaftar?access_token=${process.env.GATSBY_DIRECTUS_TOKEN}`;

let url2 = `${process.env.GATSBY_DIRECTUS_API_URL}/gemaclc/files?access_token=${process.env.GATSBY_DIRECTUS_TOKEN}`;


let url2 = `${process.env.GATSBY_DIRECTUS_API_URL}/gemaclc/files?access_token=${process.env.GATSBY_DIRECTUS_TOKEN}`;

axios(url, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    data: JSON.stringify({
      status:"published",
      nama: this.state.name,
      // email: this.state.email,
      // telepon: this.state.telepon,
      // program: [1],
      // tanggal_lahir: this.state.tanggal_lahir,
      // tempat_lahir: this.state.tempat_lahir,
    })
})
.then(res => {
  console.log(res)
  return axios.post(url2, data, {
    
    data: JSON.stringify(
    {
        data: data,
        
    
    }), 
})
})
.then(res => {
  console.log(res.data.data.id) 
  return axios.patch( url3, {

  })
})
.catch(error => {
    console.log(error)
});

Answer 1

I made a very simplified example of what you're trying to accomplish using async/await syntax since .then() would be messier to read; basically you can store the result of each post request in a variable to use in your patch request. I'm not sure what your response object looks like, so you may have to do some additional property extraction.

//simulates 1st post request
const post1= new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000)
});

//simulates 2nd post request
const post2= new Promise((resolve, reject) => {
    setTimeout(() => resolve(2), 1000)
});

const groupedRequests = async() => {

    //represents calling your 1st post request;
    let id1 = await post1; 
    //represents calling your 2nd post request
    let id2 = await post2; 
  
    //represents your patch request
    console.log(id1, id2)
}
  
groupedRequests();

Edit: I went ahead and did the .then() version so you could see the comparison.

//simulates 1st post request
const post1= new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000)
});

//simulates 2nd post request
const post2= new Promise((resolve, reject) => {
    setTimeout(() => resolve(2), 1000)
});

//stores first result
let id1; 

//represents callings 1st post request
post1
.then(result => {
    id1 = result;
    //represents calling 2nd post request
    return post2;
}).then(result => {
    let id2 = result; 
    //represents your patch request
    console.log(id1, id2)
})