Профессиональный способ создания вложенных AJAX-запросов с использованием React Native

Question

Я хотел бы изучить лучший способ иметь вложенный запрос ajax или множество возможных решений, чтобы получить профессиональный сценарий для приведенного ниже сценария.Любое предложение импровизировать.

// First request starts here
fetch(endpoint1, {
    method: 'POST',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
            "email" : this.state.email,
        }),
})
.then((response) => response.json())
    .then((responseJson) => {
      // Second request starts here
    fetch(endpoint2, {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
                "email" : this.state.email,
            }),
    })
    .then((response) => response.json())
        .then((responseJson) => {
        // Third request starts here
            fetch(endpoint3, {
                method: 'GET',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                },
            })
            .then((response) => response.json())
                .then((responseJson) => {
                    // responsejson
                })
                .catch((error) => {

                });
        // Third request ends here
        })
        .catch((error) => {
          console.error(error);
        });
    // Second request ends here
    })
    .catch((error) => {
      console.error(error);
    });
// First request ends here

Любыми способами это не проблема, а просто понять и импровизировать.

Answer 1

Я думаю, что лучше перенести ваш код в функцию и повторно использовать его в запросах.

postApi(endpoint, params){
  fetch(endpoint, {
    method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(params)
  }).then((response) => response.json())
    .then((responseJson) => return responseJson )
    .catch(error => return { error: true })
}

getApi(endpoint){
  fetch(endpoint, {
    method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
  }).then((response) => response.json())
    .then((responseJson) => return responseJson )
    .catch(error => return { error: true })
}

calls(){
  this.postApi(
    endpoint1, {
      "email" : this.state.email,
    }).then(response1 => {
      if(response1.error) {
        alert("error api 1")
      }else{
        this.postApi(endpoint2, {
            "email" : this.state.email,
        }).then(response2 => {
          if(response2.error){
            alert("error api 2")
          }else {
            this.getApi(endpoint3).then(response3 => {
              if(response3.error){
                alert("error api 3")
              }else {
                // do something
              }
            })
          }
        })
      }
    }
  )
}