Как получить хорошее отображение после получения? - PullRequest
Новая
       65

Как получить хорошее отображение после получения?

0 голосов
/ 15 апреля 2020

Я экспериментирую с fetch на какой-то веб-странице, чтобы использовать его в проекте. И у меня есть проблема, которую мне нужно решить.

Код ниже, я использую fetch для доступа к своему сайту (https://mynicewebsite.example.com), возможно установив некоторые options (headers ....) ... Используя document.getElementById ('bdyID'). inner HTML = await response.text (); Я отображаю содержимое сайта (https://mynicewebsite.example.com) в браузере. Но при этом способе весь текст отображается в виде длинной непрерывной символьной строки. Как я могу получить хороший HTML дисплей, показывающий сайт, который обычно отображается в браузере, когда кто-то напрямую посещает его.

Вот код: 

<!DOCTYPE html>
<html>
<head>
</head>
<body id='bdyID'>
<script>
   const makeFetchCall = async () => {
      const response = await fetch('https://mynicewebsite.example.com', {
         method: 'GET',
         headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer blahfblahdblahzblah',
            //..... // possibly some other things
         }
      });

      document.getElementById('bdyID').innerHTML = await response.text();
   }

   makeFetchCall();
</script>
</body>
</html>

Вот снимок экрана дисплея с кодом выше:

enter image description here

А вот снимок экрана дисплея, если смотреть прямо на https://mynicewebsite.example.com в браузере:

enter image description here

1 Ответ

0 голосов
/ 15 апреля 2020

Я предполагаю, что по заголовку типа содержимого, который вы можете вызвать. json для объекта ответа. 

const data = await response.json()
const formattedResponse = JSON.stringify(data, null, 2);
document.getElementById('bdyID').innerHTML = formattedResponse;

JSON .stringify принимают три параметра. третий параметр - это пробел https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

Имейте в виду, что вы можете увидеть свой ответ в хорошо отформатированном devtools. Пример с json и предварительным тегом: https://codesandbox.io/s/condescending-platform-f6gj6?fontsize=14&hidenavigation=1&theme=dark

...