1. Использование Promise для асинхронной операции

Рассмотрим пример проверки готовности учебного материала. Программа имитирует ожидание ответа системы.

JavaScript-код:

function checkMaterial() {

return new Promise((resolve) => {

setTimeout(() => {

resolve("Учебный материал готов");

}, 2000);

});

}

console.log("Начало проверки");

checkMaterial().then((result) => {

console.log(result);

});

console.log("Проверка выполняется...");

Объяснение:

Promise — объект, представляющий будущий результат операции.

resolve() — сообщает об успешном завершении операции.

setTimeout() — выполняет функцию после заданной задержки.

then() — обрабатывает успешный результат Promise.

console.log() — выводит сообщение в консоль.

Результат:

Сначала выводятся сообщения:

Начало проверки

Проверка выполняется...

Примерно через две секунды появляется сообщение:

Учебный материал готов

Программа продолжает выполнять другие инструкции, не ожидая завершения асинхронной операции.

2. Получение данных с сервера с помощью Fetch API

Рассмотрим пример загрузки информации об учебных курсах с сервера университета.

JavaScript-код:

async function loadCourses() {

try {

const response = await fetch("/api/courses");

if (!response.ok) {

throw new Error("Ошибка HTTP: " + response.status);

}

const courses = await response.json();

console.log("Список курсов:", courses);

} catch (error) {

console.log("Не удалось загрузить курсы:", error.message);

}

}

loadCourses();

Объяснение:

async — объявляет асинхронную функцию.

await — ожидает завершения Promise внутри функции.

fetch() — отправляет HTTP-запрос.

response.ok — проверяет успешность HTTP-ответа.

response.json() — преобразует тело ответа из JSON.

try/catch — позволяет обрабатывать ошибки.

Результат:

Если сервер успешно отвечает на запрос, программа выводит полученный список курсов.

Если возникает сетевая ошибка или сервер возвращает неуспешный HTTP-статус, программа выводит сообщение об ошибке.

Для выполнения примера необходим работающий сервер с адресом /api/courses, возвращающий JSON.

3. Выполнение нескольких запросов одновременно

Рассмотрим пример одновременной загрузки расписания и списка преподавателей.

JavaScript-код:

async function loadUniversityData() {

try {

const [scheduleResponse, teachersResponse] =

await Promise.all([

fetch("/api/schedule"),

fetch("/api/teachers")

]);

if (!scheduleResponse.ok || !teachersResponse.ok) {

throw new Error("Ошибка загрузки данных");

}

const [schedule, teachers] = await Promise.all([

scheduleResponse.json(),

teachersResponse.json()

]);

console.log("Расписание:", schedule);

console.log("Преподаватели:", teachers);

} catch (error) {

console.log(error.message);

}

}

loadUniversityData();

Объяснение:

Promise.all() — ожидает завершения нескольких Promise.

fetch() — выполняет запрос к серверу.

response.json() — получает данные из JSON-ответа.

try/catch — обрабатывает возникающие исключения.

Результат:

Программа одновременно отправляет два запроса.

После успешного получения ответов в консоли отображаются расписание и список преподавателей.

Если один из запросов завершается сетевой ошибкой или сервер возвращает неуспешный HTTP-статус, программа сообщает об ошибке.

Для выполнения примера необходимы соответствующие серверные API.