Как я могу использовать fetch API для заполнения DIV?

#javascript #html #css #fetch

#javascript #HTML #css #извлечение

Вопрос:

Я пытаюсь получить HTML страницы (как только я смогу заставить это работать, я буду извлекать определенный Div на запрошенной странице), затем распечатайте эту страницу в моем id="data" div. Я могу видеть информацию, проходящую через обещание, но я не могу получить доступ к этой информации.

 const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://www.booking.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl   url) // https://cors-anywhere.herokuapp.com/https://example.com
  .then(response => response)
  .then(data => {
    console.log(data.text());
    return document.getElementById('data').innerHTML = data.text();
  })
  .catch((err) => console.log("Can’t access "   url   " response. Blocked by browser?"   err));

 <div id='data'></div>

Ответ №1:

.text() Метод, который вы вызываете в теле ответа, возвращает обещание. Таким образом, правильный способ доступа к нему был бы через цепочку обещаний.

Согласно документации:

Метод text() Body mixin принимает поток ответов и считывает его до завершения. Он возвращает обещание, которое разрешается с помощью объекта USVString (text).

Вот как должен выглядеть ваш обновленный фрагмент:

 const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://www.booking.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl   url) // https://cors-anywhere.herokuapp.com/https://example.com
  .then(response => response.text())  
.then(html => {
  // console.log(html);
  document.getElementById('data').innerHTML = html;
})
.catch((err) => console.log("Can’t access "   url   " response. Blocked by browser?"   err));

 <html>
    <body>
       <div id='data'>
      </div>
      
    </body>
</html>

Ответ №2:

text() Или json() можно вызвать только один раз. В вашем коде вы вызываете это дважды. Итак, консоль.журнал выдает вам данные, и при следующем вызове data.text() результат будет пустым.

Вы могли бы сделать это, как показано ниже

 const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://www.booking.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl   url) // https://cors-anywhere.herokuapp.com/https://example.com
  .then(response => response)
  .then(data => {
    const resData = data.text();
    console.log(resData);
    document.getElementById('data').innerHTML = resData;
  })
  .catch((err) => console.log("Can’t access "   url   " response. Blocked by browser?"   err));

 <div id="data"></div>

1. По-прежнему отображается объект promise. И зачем возвращать результат присвоения innerHTML? return document.getElementById('data').innerHTML = resData;

2. возврат не требуется.

3. Основная проблема заключается в том, что вы не можете использовать text() или json() только один раз. Что я делаю, так это присваиваю переменной, а затем получаю доступ к переменной. вот так просто.