Как правильно обрабатывать вложенные вызовы asyn c с использованием axios - PullRequest
Новая
       15

Как правильно обрабатывать вложенные вызовы asyn c с использованием axios

0 голосов
/ 13 июля 2020

Хорошо, у меня возникла следующая проблема. У меня есть api, который для отображения соответствующих данных в интерфейсе пользователя должен сделать три вызова. Первый вызов производит номер, который нужен второму вызову для получения информации, необходимой для доступа к данным третьего вызова. Мой способ обойти это выглядит следующим образом: 

const nastyAsyncFunc = () => {

  //First call responds with necessary parameter for second call
  
  axios.get("/api/endpoint1").then((response) => {
    const endpoint1Data = response.data;
    
    // Second call takes first parameter and produces second parameter as a response to access third call
    
    axios.get(`/api/${endpoint1Data}/endpoint2`).then((response) => {
      const endpoint2Data = response.data;
      
      // With second response we can access third response data.
      
      axios.get(`/api/${endpoint2Data}/endpoint3`).then((response) => {
        const finalResponse = response.data;
        return finalResponse;
      });
    });
  });
};

Этот подход дает мне данные, которые мне нужны, но, как вы можете видеть, это чертовски sh, и он вызывает боль при обработке ошибок. мягко говоря. Сталкивался ли кто-нибудь из вас с таким вызовом и как вы подходили к тому, чтобы сделать его чище и проще отлаживать? а также каков стандартный подход к обработке таких запросов. Заранее всем спасибо.

Ответы [ 2 ]

2 голосов
/ 13 июля 2020

Есть четыре решения проблемы обратного вызова, подробнее здесь вложенные обратные вызовы

  • Написать комментарии
  • Разделить функции на более мелкие функции
  • Использование обещаний
  • Использование Async / await

Пример: 

const makeBurger = async () => {
  const [beef, buns] = await Promise.all(getBeef, getBuns);
  const cookedBeef = await cookBeef(beef);
  const burger = await putBeefBetweenBuns(cookedBeef, buns);
  return burger;
};

// Make and serve burger
makeBurger().then(serve);
1 голос
/ 13 июля 2020

вы можете использовать await для обработки ax ios promisses, в вашем примере кода вы можете обрабатывать код с помощью: 

const endPoint1Reponse= await axios.get("/api/endpoint1");
const apiResponse = await axios.get(`/api/${endpoint1Data}/endpoint2`); 
// ...

очевидно, что этот код чище, чем ваш код, кроме этого вы можете использовать Блок try / catch с функцией asyn c и операторами ожидания

для получения дополнительной информации см. документацию MDN

...