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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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