Javascript Функция извлечения возвращает [объект Promise]

В настоящее время я работаю над проектом, который включает в себя веб-сайт, построенный и запущенный на Django. На этом сайте я пытаюсь загрузить данные через быстрый API и пытаюсь загрузить эти данные через JavaScript и Fetch API. Но я всегда получаю вместо данных, предоставляемых через API, [объект Promise]. Я пробовал много различных методов, но ни один из них не работает.

Любая помощь будет высоко оценена!

Я пробовал, например: 

document.getElementById("1.1").innerHTML = fetch('the URL')
 .then(response => response.text())

или

document.getElementById("1.1").innerHTML = fetch('the URL')
.then(response => response.text())
.then((response) => {
    console.log(response)
})

и многие другие методы. Я также проверил, и запрос API работает отлично, возвращая строку.

Вы хотите, чтобы настройки html отображались при регистрации окончательного ответа, например:

fetch('the URL')
.then(response => response.text())
.then((response) => {
    console.log(response)
    document.getElementById("1.1").innerHTML = response
})

Другие способы, в том числе заставить выполнить все обещание ответа:

const getData = async (url) => {
  const res = await fetch(url)
  const resText = await res.text()
  return resText
}
const addTextFromUrl = async (url, element) => {
  const text = await getData(url)
  element.innerHtml = text
}
addTextFromUrl('theUrl', document.getElementById("1.1"))

Обычно при обучении проще следовать синтаксису async/await, но вы всегда должны пытаться/ловить любые ошибки.

Каждый вызов .then действительно возвращает новое обещание. Таким образом

Вам необходимо присвоить значение в обратном вызове или использовать async/await

fetch('the URL')
.then(response => response.text())
.then((response) => {
    document.getElementById("1.1").innerHTML = response
})

или сделать это внутри асинхронной функции

async function getHtml() {
  document.getElementById("1.1").innerHTML = await fetch('the URL')
   .then(response => response.text())
}

getHtml();

В/о использование then

async function getHtml() {
  const response = await fetch('the URL');

  const html - await response.text();

  document.getElementById("1.1").innerHTML = html;
}

getHtml();

fetch() возвращает объект Promise со значением response.text() внутри него. Именно поэтому [object Promise] печатается console.log. Объект Promise может быть развернут с помощью await, что позволяет присвоить внутреннее значение:

document.getElementById("1.1").innerHTML = await fetch('the URL')
.then(response => response.text())
})

Для обработки ошибок обратите внимание на .catch(), которые могут быть соединены в цепочку .then().

Вернуться на верх