​Зачем придумали async/await?

​Зачем придумали async/await?

Ключевой целью введения async/await в JavaScript было упростить написание и чтение асинхронного кода, сделать его более линейным и похожим на синхронный.

Улучшение читаемости кода

Асинхронный код, написанный с использованием коллбеков или промисов, может быть трудным для чтения и понимания, особенно когда имеется несколько вложенных асинхронных операций. async/await делает асинхронный код более линейным, что упрощает его понимание.

Пример с промисами:

function fetchData() {

return new Promise((resolve) => {

setTimeout(() => {

  resolve("some data");

}, 1000);

});

}

fetchData().then((data) => {

console.log(data);

}).catch((error) => {

console.error(error);

});

Пример с async/await:

async function fetchData() {

return new Promise((resolve) => {

setTimeout(() => {

  resolve("some data");

}, 1000);

});

}

async function main() {

try {

const data = await fetchData();

console.log(data);

} catch (error) {

console.error(error);

}

}

main();

Избегание "ада коллбеков"

Когда асинхронные операции вложены друг в друга, код становится трудным для чтения и сопровождения. Это называется "адом коллбеков" (callback hell). async/await позволяет писать асинхронный код последовательно, без вложенности.

Пример с промисами:

getData((data) => {

processData(data, (processedData) => {

saveData(processedData, (result) => {

  console.log(result);

});

});

});

Пример с async/await:

async function main() {

try {

const data = await getData();

const processedData = await processData(data);

const result = await saveData(processedData);

console.log(result);

} catch (error) {

console.error(error);

}

}

main();

Снижение вероятности ошибок

Когда используется async/await, ошибки могут быть обработаны с использованием привычного try/catch блока, что снижает вероятность пропуска ошибок.

Пример с промисами:

fetchData().then((data) => {

return processData(data);

}).then((processedData) => {

return saveData(processedData);

}).catch((error) => {

console.error(error);

});

Пример с async/await:

async function main() {

try {

const data = await fetchData();

const processedData = await processData(data);

const result = await saveData(processedData);

console.log(result);

} catch (error) {

console.error(error);

}

}

main();

👉 @seniorFront