update(JS): web/javascript/reference/global_objects/promise

files/uk/web/javascript/reference/global_objects/promise/index.md

@@ -230,11 +230,13 @@ Promise.resolve(aThenable); // Проміс сповнюється значен
 
 ### Базовий приклад
 
+В цьому прикладі використаємо setTimeout(...) для симуляції асинхронного коду.
+На практиці тут буде щось схоже на XHR чи API HTML.
+
 ```js
 const myFirstPromise = new Promise((resolve, reject) => {
-  // Викликаємо resolve(...), коли те, що ми робимо асинхронно, завершилося успіхом, і reject(...), якщо операція була невдалою.
-  // В цьому прикладі використаємо setTimeout(...) для симуляції асинхронного коду.
-  // На практиці тут буде щось схоже на XHR чи API HTML.
+  // Викликаємо resolve(...), коли те, що ми робимо асинхронно,
+  // завершилося успіхом, і reject(...), якщо операція була невдалою.
   setTimeout(() => {
     resolve("Успіх!"); // Ура! Все пройшло добре!
   }, 250);
@@ -383,7 +385,66 @@ btn.addEventListener("click", testPromise);
 
 ### Завантаження зображення за допомогою XHR
 
-Ще один приклад використання `Promise`, цього разу з завантаженням зображення за допомогою {{domxref("XMLHttpRequest")}}, доступний на GitHub-репозиторії MDN [js-examples](https://github.com/mdn/js-examples/tree/main/promises-test). Також можна [побачити його в дії](https://mdn.github.io/js-examples/promises-test/). Кожний крок прокоментовано, що дає змогу докладно розглянути архітектуру промісів та XHR.
+Ще один приклад використання `Promise` і {{domxref("XMLHttpRequest")}} для завантаження зображення показаний нижче.
+Кожний крок прокоментовано, завдяки чому можна детально роздивитися архітектуру Promise і XHR.
+
+```html hidden live-sample___promises
+<h1>Приклад Promise</h1>
+```
+
+```js live-sample___promises
+function imgLoad(url) {
+  // Створити новий проміс за допомогою конструктора Promise();
+  // Тут у нього аргумент – це функція з двома параметрами, resolve і reject
+  return new Promise((resolve, reject) => {
+    // XHR для завантаження зображення
+    const request = new XMLHttpRequest();
+    request.open("GET", url);
+    request.responseType = "blob";
+    // Коли запит завантажується, перевірити, чи був він успішним
+    request.onload = () => {
+      if (request.status === 200) {
+        // Якщо успішний, то вирішити проміс, передавши назад відповідь на запит
+        resolve(request.response);
+      } else {
+        // Якщо неуспішний, то відхилити проміс з повідомленням про помилку
+        reject(
+          Error(
+            `Image didn't load successfully; error code: + ${request.statusText}`,
+          ),
+        );
+      }
+    };
+    // Обробити помилки мережі
+    request.onerror = () => reject(new Error("There was a network error."));
+    // Надіслати запит
+    request.send();
+  });
+}
+// Отримати посилання на елемент body та створити новий об'єкт зображення
+const body = document.querySelector("body");
+const myImage = new Image();
+const imgUrl =
+  "https://mdn.github.io/shared-assets/images/examples/round-balloon.png";
+// Викликати цю функцію з URL, який треба завантажити, а тоді ланцюжком
+// викликати метод then() з двома функціями зворотного виклику
+imgLoad(imgUrl).then(
+  (response) => {
+    // Перша функція спрацьовує, коли проміс вирішується, з request.response,
+    // заданим у методі resolve().
+    const imageURL = URL.createObjectURL(response);
+    myImage.src = imageURL;
+    body.appendChild(myImage);
+  },
+  (error) => {
+    // Друга функція спрацьовує, коли проміс
+    // відхиляється, і друкує Error, заданий у методі reject().
+    console.log(error);
+  },
+);
+```
+
+{{embedlivesample("promises", "", "240px")}}
 
 ### Відстежування поточного установчого об'єкта