run-dev

Асинхронные функции и методы в JavaScript: примеры для JS

Асинхронная функция в JavaScript — это функция, которая всегда возвращает промис и внутри которой можно использовать ключевое слово await. Это позволяет выстраивать асинхронные цепочки кода в синхронном стиле, делая их более читаемыми.

Асинхронная функция объявляется с помощью ключевого слова async перед function.

async function getData() {
    return 'Данные загружены';
}

Пример использования асинхронной функции

Асинхронная функция всегда возвращает промис, даже если возвращает простое значение:

async function getData() {
    return 'Данные загружены';
}

getData().then(console.log); // Данные загружены

Если внутри вызываются функции, возвращающие промисы, их можно ожидать с помощью await:

async function fetchData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    console.log(data);
}

Асинхронные методы в объектах

Асинхронные функции можно добавлять как методы в объекты:

const api = {
    async getPost() {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        return await response.json();
    }
};

api.getPost().then(console.log);

В классах методы также могут быть асинхронными:

class DataService {
    async getPost() {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        return await response.json();
    }
}

const service = new DataService();
service.getPost().then(console.log);

Обработка ошибок в асинхронных функциях

Ошибки в асинхронных функциях обрабатываются с помощью блока try/catch:

async function fetchData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        if (!response.ok) {
            throw new Error(`Ошибка HTTP: ${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Ошибка:', error);
    }
}

Асинхронные функции со стрелочным синтаксисом

Асинхронными могут быть и стрелочные функции:

const fetchPost = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    return await response.json();
};

fetchPost().then(console.log);

Асинхронные функции в цепочках операций

При выполнении нескольких независимых запросов их удобно запускать одновременно с помощью Promise.all внутри асинхронной функции:

async function fetchData() {
    const [post, user] = await Promise.all([
        fetch('https://jsonplaceholder.typicode.com/posts/1').then(r => r.json()),
        fetch('https://jsonplaceholder.typicode.com/users/1').then(r => r.json())
    ]);

    console.log('Пост:', post);
    console.log('Пользователь:', user);
}

Возврат промисов внутри асинхронных функций

Если асинхронная функция возвращает промис, он автоматически оборачивается во внешний промис:

async function getData() {
    return fetch('https://jsonplaceholder.typicode.com/posts/1').then(r => r.json());
}

Это позволяет использовать как await, так и обычные методы then:

getData().then(console.log);

async function showData() {
    const data = await getData();
    console.log(data);
}

Асинхронные функции в JavaScript — это удобный и современный способ работы с асинхронными операциями. Они делают код более линейным, снижают вероятность логических ошибок и упрощают обработку ошибок по сравнению с цепочками then/catch. Поддержка этих функций есть во всех современных браузерах, что делает их стандартом при работе с асинхронностью в JavaScript.

Больше записей