js: fetch html

content/posts/2023/javascript/fetch-html.md

@@ -0,0 +1,64 @@
+---
+title: "⬇️ Скачаиваем HTML и парсим на JavaScript"
+date: 2023-01-04T18:23:50+03:00
+draft: false
+tags: [tutorial, javascript]
+---
+
+## Fetch API возвращает поток
+
+Напомню, что ответ, который возвращает fetch(), представляет собой `ReadableStream`.
+
+Чаще всего ты используешь метод `json()`
+для получения объекта JSON из возвращенного потока.
+
+Например следующий код вернёт последную версию Minecraft:
+
+```javascript
+let minecraftUrl = 'https://launchermeta.mojang.com/mc/game/version_manifest_v2.json';
+
+fetch(minecraftUrl)
+    .then((response) => response.json()) // Вызов API прошел успешно!
+    .then((data) => console.log(data.latest.release)) // JSON из ответа
+    .catch((err) => console.warn('Something went wrong.', err)); // Ошибка
+```
+
+Но как быть, если вместо JSON ты хочешь получить HTML?
+
+## Метод `text()` 
+
+Например, я хочу получить своё имя со своей страницы в Steam.
+
+Хитрость заключается в использовании метода `text()` вместо метода `json()`.  
+Метод возвращает текстовую строку HTML.
+
+```javascript
+fetch('https://steamcommunity.com/id/_iiiypuk')
+    .then((response) => { return response.text(); })
+    .then((html) => { console.log(html); })
+    .catch((err) => console.warn('Something went wrong.', err));
+```
+
+> Примечание: это будет работать только при запуске на https://steamcommunity.com.  
+> Ты получишь ошибку CORS, если попытаешься запустить код в другом месте.
+
+## Получение HTML из текстовой строки
+
+Теперь, когда у тебя есть HTML в виде текстовой строки,
+ты можешь сделать с ним несколько вещей.
+
+1. Вставьть его в элемент с помощью `innerHTML`.
+2. Преобразовать в HTML и манипулировать им.
+
+```javascript
+fetch('https://steamcommunity.com/id/_iiiypuk')
+    .then((response) => { return response.text() })
+    .then((html) => {
+        let parser = new DOMParser();
+        let doc = parser.parseFromString(html, 'text/html');
+
+        const realName = document.getElementsByClassName('header_real_name ellipsis');
+        console.log(realName[0].children[0].innerText);
+    })
+    .catch((err) => console.warn('Something went wrong.', err));
+```