Axios: le chaînage de plusieurs requêtes à l'API

J'ai besoin d'enchaîner un peu de requêtes à l'API de Google Maps API, et je suis en train de le faire avec Axios.

Ici à la première demande, qui est en componentWillMount()

axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p1)
  .then(response => this.setState({ p1Location: response.data }))  }

Voici la deuxième demande:

axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p2)
  .then(response => this.setState({ p2Location: response.data }))

Ensuite, nous avons une troisième demande, qui dépend de la première de deux cours d'achèvement:

axios.get('https://maps.googleapis.com/maps/api/directions/json?origin=place_id:' + this.state.p1Location.results.place_id + '&destination=place_id:' + this.state.p2Location.results.place_id + '&key=' + 'API-KEY-HIDDEN')
  .then(response => this.setState({ route: response.data }))

Comment puis-je en chaîne de ces trois appels de sorte que le troisième qui se passe après les deux premiers?

OriginalL'auteur Freddy | 2017-05-25

Tout d'abord, pas sûr que vous voulez faire dans votre componentWillMount, parce que votre composant ne sera pas rendu jusqu'à ce que tout cela est fait, il est mieux de l'avoir dans componentDidMount et ont certains états par défaut qui sera mise à jour une fois fait avec ces demandes. Deuxièmement, vous voulez limiter le nombre de setStates vous écrire car ils sont susceptibles de provoquer des re-rend, voici une solution à l'aide de async/await:

async componentDidMount() {

  //Make first two requests
  const [firstResponse, secondResponse] = await Promise.all([
    axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&address=${this.props.p1}`),
    axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&address=${this.props.p2}`)
  ]);

  //Make third request using responses from the first two
  const thirdResponse = await axios.get('https://maps.googleapis.com/maps/api/directions/json?origin=place_id:' + firstResponse.data.results.place_id + '&destination=place_id:' + secondResponse.data.results.place_id + '&key=' + 'API-KEY-HIDDEN');

  //Update state once with all 3 responses
  this.setState({
    p1Location: firstResponse.data,
    p2Location: secondResponse.data,
    route: thirdResponse.data,
  });

}

Parfait. Ce qui est excellent.

OriginalL'auteur Matt Aft

11

Avez-vous utilisé l'axios.tous ? Vous pouvez essayer avec quelque chose de similaire:
```
axios.all([axios.get(`firstrequest`),
           axios.get(`secondrequest`),
           axios.get(`thirdrequest`)])
     .then(axios.spread((firstResponse, secondResponse, thirdResponse) => {  
         console.log(firstResponse.data,secondResponse.data, thirdResponse.data);
     }))
     .catch(error => console.log(error));
```
Cela permettra de prendre tous vos obtenir et mettre à l'intérieur une réponse qui doit être appelé .des données comme:
firstResponse.data

Que si l'entrée de l' 'secondrequest' provient de la réponse de la "firstrequest'?
eh bien dans ce cas j'irais avec quelque chose comme ceci: `` axios.get('firstrequest). ensuite( firstResponse => { axios.get('secondResponse', firstResponse.les données.id) } ) ``

OriginalL'auteur Ricardo Gonzalez

Un peu en retard à la fête, mais j'aime ce modèle de chaînage promet, de revenir à tenir la promesse de la chaîne d'vivant.

axios
  .get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p1')
  .then(response => {
    this.setState({ p1Location: response.data });
    return axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p2');
  })
  .then(response => {
    this.setState({ p2Location: response.data });
    return axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p3');
  })
  .then(response => {
    this.setState({ p3Location: response.data });
  }).catch(error => console.log(error.response));

OriginalL'auteur chrisz

Je pense que vous avez besoin de quelque chose comme ceci:

const firstRequest = axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p1)
      .then(response => this.setState({ p1Location: response.data }))  }

const secondRequest = axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p2)
  .then(response => this.setState({ p2Location: response.data }))

const thirdRequest = axios.get('https://maps.googleapis.com/maps/api/directions/json?origin=place_id:' + this.state.p1Location.results.place_id + '&destination=place_id:' + this.state.p2Location.results.place_id + '&key=' + 'API-KEY-HIDDEN')
  .then(response => this.setState({ route: response.data }))


Promise.all([firstRequest, secondRequest])
       .then(() => {
           return thirdRequest
       })

OriginalL'auteur Morleee

Pour de meilleures performances et plus propre code:

1. L'utilisation de la promesse.tous les() ou de l'axios.tous les() pour exécuter request1 et request2 en même temps. Donc request2 exécutera sans attendre request1 réponse. Après request1 et request2 retour à la réponse, request3 continuera d'exécuter basée sur la réponse renvoyée données en paramètre.

2. Modèle de Chaînes de back-tiques (`)

async componentDidMount(){
    try{
        const [request1, request2] = await Promise.all([
           axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&address=${this.props.p1}`),
           axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&address=${this.props.p2}`)
        ]);

        const request3 = await axios.get(`https://maps.googleapis.com/maps/api/directions/json?origin=place_id:${request1.data.results.place_id}&destination=place_id:${request2.data.results.place_id}&key=${API-KEY-HIDDEN}`);
        console.log(request3);
    }
    catch(err){
        console.log(err)
    }
}

OriginalL'auteur Toh Ban Soon

0

Ceci est lié à la JS est Promesses. Vous pouvez résoudre de différentes façons. Le moyen le plus simple pour moi est que vous devriez nid chaque demande de départ de la première à la troisième. Cela signifie à partir de la première demande, vous devez mettre votre deuxième axios.get(url) dans la première demande du .then() et de mettre de la troisième à la deuxième demande de .then().

Pour des promesses en général, vous vous attendez à ce que l'intérieur de la .then() partie promesse est résolu et vous pouvez avoir accès à la response. De sorte que par l'imbrication, vous pouvez résoudre le problème d'être asynchrone dans un pas de façon si élégante.

Comme a dit qu'il ne serait pas élégant. Je suggère de vérifier d'autres réponses pour une meilleure des solutions.

OriginalL'auteur milkersarac

Vous devez vous connecter pour publier un commentaire.