0

Всем привет, изучаю JS сейчас пытаюсь понять как работают сетевые запросы через промис. Есть вот такой код:

request(url)
      .then( data => {
         const ingredient = data.ingredients[0]
         ingredientDescription.innerHTML = ingredient.strDescription;
         const name = ingredient.strIngredient;
         console.log(name)
         const url = `https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${name}`;
         
         `request(url)
            .then( data => {
               console.log(data)
            })`
      })

У меня есть функция request которая возвращает промис, далее мне нужно сделать запрос на url, для того чтобы получить некоторую информацию информация выводится в модальное окно. Далее на основе этой информации мне нужно взять определенные данные и уже по ним вывести доп.информацию в то же модальное окно.

Вопрос можно ли делать вот такую вложенность как у меня сейчас? То есть вызывать функцию request внутри then.

1
  • Делать такую вложенность крайне не рекомендуется, создавайте функции которые отвечают за определенные действия и разгружайте свои вложенности. А еще лучше используйте async/await конструкцию для того, чтобы вовсе избавиться от вложенности.
    – MoloF
    23 янв 2021 в 10:07

2 ответа 2

0

const api_ingredient_url = 'https://www.thecocktaildb.com/api/json/v1/1/lookup.php?iid=552';
const api_ingredient_info_url = 'https://www.thecocktaildb.com/api/json/v1/1/filter.php?';

const request = fetch;
        
(async () => {
    try {
        const response_ingredient = await request(api_ingredient_url);
        const data = await response_ingredient.json();

        const ingredient = data.ingredients[0];        
        //ingredientDescription.innerHTML = ingredient.strDescription;

        const name = ingredient.strIngredient;
        console.log(name)

        const params = new URLSearchParams({ i: name });
        const response_ingredient_info = await request(api_ingredient_info_url + params.toString());
        const ingredients = await response_ingredient_info.json();
        
        console.log(ingredients);
    } catch (e) {
        console.log(e.message);
    }
})();

1
  • Спасибо за ответ
    – Yuriy
    25 янв 2021 в 6:11
0

Коллбэк переданный в .then может возвращать Promise, поэтому указанный вызов request внутри then вполне допустим, однако, не обязательно делать вложенный then, его вполне можно добавить в цепочку:

request(url)
  .then( data => {
     const ingredient = data.ingredients[0]
     ingredientDescription.innerHTML = ingredient.strDescription;
     const name = ingredient.strIngredient;
     const url = `https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=${name}`;
     return url;
  }).then ( request )
    .then( data => {
       console.log(data);
    })
1
  • Спасибо, ваш пример очень помог.
    – Yuriy
    25 янв 2021 в 6:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.