Функция выборки Javascript возвращает [object Promise]
В настоящее время я работаю над проектом, который включает веб-сайт, созданный и управляемый Django. На этом веб-сайте я пытаюсь загрузить данные через быстрый API и пытаюсь загрузить эти данные через JavaScript и API Fetch. Но я всегда получаю вместо данных, предоставленных через API, [object 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.info(response)
})
и многие другие методы. Я также проверил, и запрос API работает отлично, возвращая строку.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы хотите, чтобы настройка html отображалась при регистрации окончательного ответа, например:
fetch('the URL')
.then(response => response.text())
.then((response) => {
console.info(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();
@Levi.mbc Убедитесь, что document.getElementById("1.1") возвращает что-либо, возможно, вы просто получаете сообщение об ошибке.
Спасибо за подсказку! Я заглянул внутрь консоли и обнаружил, что теперь она возвращает ошибку, связанную с контролем доступа.
@Levi.mbc Возможно, const html - await response.text() должно быть const html = response.text()
@tlietz Вам нужно подождать. В противном случае вы получите Promise<string>. developer.mozilla.org/en-US/docs/Web/API/Response/text
Каким-то образом, если я попробую это, он действительно не вернет [object Promise], а вместо этого будет пустым. Я проверил URL-адрес, и он выглядит нормально, возвращая строку. Любая идея, почему это происходит?