Как получить данные из ответа на запрос fetch javascript

Я делаю запрос на выборку в javascript. Он извлекает данные, когда я запускаю консоль, она показывает мне данные. но когда Я пытаюсь предупредить его, а затем функция отображается пустой. он сразу показывает предупреждение при загрузке страницы. Я думаю, что это предупреждение перед ответом на запрос

Вот мой код javascript

fetch("https://01b4e41e6262.ngrok.io/api/get_schedule_orders/" + gUser.getData().id).then(res => {
        if (res.ok) {
        alert(res)
        }
    });

Вы должны конвертировать в res.json или res.text, чтобы получить контент из ответа.

HymnZzy 12.12.2020 18:27

Отвечает ли это на ваш вопрос? Как вернуть ответ при асинхронном вызове?

LeviathanCalumet 12.12.2020 18:42

есть много, много, много вопросов Stack Overflow о том, как получить доступ к данным в ответ на fetch. какие из них вы исследовали и почему они не решили вашу конкретную проблему?

Dan O 12.12.2020 18:48
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
4
5 187
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

fetch() изначально возвращает Promise, поэтому res изначально является обещанием, либо разрешенным, либо отклоненным. Затем res.json() снова возвращает промис, а не значение напрямую (вы можете проверить это, выполнив console.info(res) в первом then(), там в прототипе вы увидите json(), который снова основан на промисе.

Вот почему мы связываем обещания, выполняя return res.json(), и получаем наши данные во втором разрешении обещания, а в случае отклонения вызывается обратный вызов catch().

fetch("https://01b4e41e6262.ngrok.io/api/get_schedule_orders/" + gUser.getData().id).then(res => {
    if (res.status>=200 && res.status <300) {
      return res.json()
    }else{
      throw new Error();
    }
}).then(data=>console.info(data))
 .catch(err=>console.info('fetch() failed'))

ОБНОВЛЕНИЕ: ваш API возвращает пустой массив.

Пожалуйста, проверьте параметры API.

@Bilal arshad: приведенный выше код также обрабатывает вашу ошибку и прекрасно работает во всех сценариях. Оцените ответ. Спасибо :) Боже, благослови и счастливого кодирования

Imran Rafiq Rather 12.12.2020 18:37

Я пытаюсь это, но не работает fetch("https://01b4e41e6262.ngrok.io/api/get_schedule_orders‌​/" + gUser.getData().id).then(res => { if (res.status===200) { return res.json(); } }).then(data=> { $scope.schedule_orders = data.data; alert(JSON.stringify(data.json())) });

user13134426 12.12.2020 18:42

Проверьте, нормально ли работает API. Попробуйте console.info() в блоке catch(). А пока посмотрю в чем может быть проблема :)

Imran Rafiq Rather 12.12.2020 18:43

Я проверил это, ваш API фактически возвращает пустой массив. С кодом все в порядке.

Imran Rafiq Rather 12.12.2020 18:48

в разделе предварительного просмотра я вижу, что 0: {id: 10, devy_user_id: 129731,…} created_at: null data: "{"paymethod_id":1,"business_id":76,"delivery_type":"1","dri‌​ver_tip":0,"delivery‌​_zone_id":6569,"deli‌​very_datetime":null,‌​"location":RPM\"},\"‌​tag\":\"home\"}"}" devy_user_id: 129731 id: 10 schedule_date: "2020-12-12 21:06:00" updated_at: null

user13134426 12.12.2020 18:49

хм. Я понимаю. Кажется, я понял это, дорогой брат. Позвольте мне отладить.

Imran Rafiq Rather 12.12.2020 18:52

Замена этого gUser.getData().id значением devy_user_id в URL-адресе возвращает массив со значениями. Смотрите jsfiddle jsfiddle.net/mvjy9e4a. Вам нужно только правильно определить параметр вашего запроса, и он будет работать нормально, т. Е. Последняя часть URL-адреса.

Imran Rafiq Rather 12.12.2020 18:56

Давайте продолжим обсуждение в чате.

Imran Rafiq Rather 12.12.2020 18:57

Дайте мне знать, работает ли он сейчас нормально :) Оценивайте и принимайте, если вы узнали что-то новое. Для других, чтобы также извлечь выгоду из :) Спасибо

Imran Rafiq Rather 12.12.2020 19:05

Fetch API инициирует цепочку из двух Promises.

  • первый промис извлекает данные с сервера
  • второе обещание разрешает полученные данные (используя .text(), .json() и т. д.)

Пример (с использованием синтаксиса async / await):

const getScheduleOrders = async (gUser) => {

  const response = await fetch('https://01b4e41e6262.ngrok.io/api/get_schedule_orders/' + gUser.getData().id);
  const scheduleOrder = await response.text();
  await window.alert(scheduleOrder);
}

Другие вопросы по теме