logo

TechCodeview

Async і Await у JavaScript

Async і Await у JavaScript — потужні ключові слова, які використовуються для обробки асинхронних операцій із промісами. Асинхронні функції неявно повертають обіцянки, тоді як Await призупиняє виконання, доки обіцянка не буде вирішена. Це спрощує асинхронний код і покращує читабельність, роблячи його синхронним.

Асинхронна функція

Theasync>функція дозволяє нам писати код на основі обіцянок так, якби він був синхронним. Це гарантує, що потік виконання не буде заблоковано.

java проти c++
  • Обробка обіцянок : асинхронні функції завжди повертають обіцянку. Якщо повертається значення, яке не є обіцянкою, JavaScript автоматично загортає його в дозволену обіцянку.

Асинхронний синтаксис

async function myFunction() { return 'Hello'; }>

приклад: Тут ми побачимо базове використання async у JavaScript.



javascript 
const getData = async () =>{ let data = 'Hello World';  повернення даних; } getData().then(data => console.log(data));>
Вихід 
Hello World>

Очікуйте ключове слово

Theawait>Ключове слово використовується для очікування вирішення обіцянки. Його можна використовувати лише в асинхронному блоці.

  • Пауза у виконанні : Await змушує код чекати, доки обіцянка не поверне результат, що забезпечує більш чистий і керований асинхронний код.

Синтаксис 

let value = await promise;>

приклад : цей приклад демонструє базове використання ключового слова await у JavaScript.

javascript 
const getData = async () =>{ let y = await 'Hello World';  console.log(y); } console.log(1); getData(); console.log(2);>
Вихід 
1 2 Hello World>

The асинхронний Ключове слово перетворює звичайну функцію JavaScript на асинхронну функцію, змушуючи її повертати Promise.

The чекати Ключове слово використовується всередині асинхронної функції, щоб призупинити її виконання та дочекатися вирішення Promise перед продовженням.

Приклад Async/Await

Тут ми будемо реалізовувати кілька промісів у методі, а потім цей метод використовуватимемо для відображення нашого результату. Ви можете перевірити JS синтаксис async/await у прикладі.

Javascript 
function asynchronous_operational_method() {  let first_promise =   new Promise((resolve, reject) =>resolve('Привіт'));  let second_promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(' techcodeview.com..'); }, 1000); });  нехай об'єднана_обіцянка = Promise.all([перша_обіцянка, друга_обіцянка]);  повернути об'єднану_обіцянку; } async function display() { let data = await asynchronous_operational_method();  console.log(дані); } дисплей();>

Вихід: 

[ 'Hello', ' techcodeview.com..' ]>

Пояснення:

  1. Створення обіцянок :
    • Створюється два проміси: одне вирішується негайно за допомогою Hello, а інше вирішується через 1 секунду за допомогою techcodeview.com...
  2. Комбінування обіцянок :
    • Метод Promise.all() об’єднує обидва обіцянки в одну промісу, combination_promise.
  3. Асинхронна функція :
    • Функція display() оголошена як async, що означає, що вона містить асинхронні операції.
  4. Очікуємо рішення про обіцянку :
    • Ключове слово await призупиняє виконання, доки не буде вирішено комбінацію промісів.
  5. Результат реєстрації :
    • Вирішений масив з combination_promise реєструється на консолі.

Примітка

до вирішити і відхилити є попередньо визначеними аргументами JavaScript.

  • функція resolve використовується, коли асинхронне завдання завершено та повертає результат.
  • Функція відхилення використовується, коли асинхронне завдання виходить з ладу та повертає причини збою.

Переваги Async і Await

  1. Покращена читаність : Async і Await дозволяють писати асинхронний код у синхронному стилі, що полегшує його читання та розуміння.
  2. Обробка помилок : використання блоків try/catch із async/await робить обробку помилок простою.
  3. Уникає зворотного пекла : Async і Await допомагають уникнути вкладених зворотних викликів і складних ланцюжків обіцянок.
  4. Краще налагодження : Налагодження коду async/await більш інтуїтивно зрозуміле, оскільки воно поводиться як синхронний код.

Висновок

Async і Await у JavaScript зробили революцію в асинхронному програмуванні, зробивши код більш читабельним і зручним для обслуговування. Дозволяючи асинхронному коду писати в синхронному стилі, вони зменшують складність, пов’язану зі зворотними викликами та ланцюжком обіцянок. Розуміння та ефективне використання async і await може значно покращити ваші навички програмування на JavaScript, полегшуючи роботу з асинхронними операціями у ваших проектах.

лістинг java

Підтримувані браузери:

Браузери, які підтримуються JS Функція Async/Await перераховані нижче:

  • Google Chrome 55 і вище
  • Firefox 52 і вище
  • Apple Safari 10.1 і вище
  • Opera 42 і вище
  • Край 14 і вище