JavaScript Async/Await — Պարզ ուղեցույց՝ օրինակներով

Async/wait-ը JavaScript-ի մի հատկություն է, որը հեշտացնում է ասինխրոն ծրագրավորումը՝ թույլ տալով գրել ասինխրոն կոդ, որը նման է համաժամանակյա կոդի: Այս հոդվածում մենք կքննարկենք Async/wait-ի հիմունքները JavaScript-ում, ներառյալ՝ ինչպես օգտագործել async և await հիմնաբառերը, և կներկայացնենք հեշտ հասկանալի օրինակներ, որոնք կօգնեն ձեզ հասկանալ դրանց գործնական իրականացումը:

Ի՞նչ է Async/Await-ը:

Async/wait-ը ասինխրոն կոդ գրելու միջոց է, որը նման է համաժամանակյա կոդի: Այն թույլ է տալիս գրել ասինխրոն կոդ՝ օգտագործելով համաժամանակյա կոդի նման շարահյուսությունը, ինչը հեշտացնում է այն կարդալն ու հասկանալը: Async/wait-ը կառուցված է Promises-ի վրա, որը մենք քննարկել ենք մեր նախորդ հոդվածում:

async Հիմնաբառ

async հիմնաբառը օգտագործվում է ֆունկցիան որպես ասինխրոն սահմանելու համար: Asynchronous ֆունկցիան վերադարձնում է Promise, որը լուծում է ֆունկցիայի վերադարձի արժեքով կամ մերժում է սխալով, եթե սխալ է տեղի ունենում: async բանալի բառին հաջորդում է ֆունկցիայի հայտարարությունը:

Օրինակ՝ օգտագործելով async հիմնաբառը

async function fetchData() {
  const data = {
    message: 'Hello, world!',
  };
  return data;
}
fetchData().then((data) => {
  console.log(data.message); // Output: Hello, world!
});

Վերևի օրինակում մենք սահմանեցինք async ֆունկցիա, որը կոչվում է fetchData, որը վերադարձնում է message հատկություն ունեցող օբյեկտ: Այնուհետև մենք զանգահարեցինք fetchData-ը և օգտագործեցինք .then() մեթոդը՝ լուծված Խոստումը մշակելու և data.message-ը կոնսոլում գրանցելու համար:

await հիմնաբառ

await հիմնաբառը օգտագործվում է սպասելու, որ խոստումը լուծվի նախքան կոդի հաջորդ տողը գործարկելը: await հիմնաբառը կարող է օգտագործվել միայն async ֆունկցիայի ներսում:

Օրինակ՝ await հիմնաբառի օգտագործում

function fetchData() {
  return new Promise((resolve, reject) => {
    const data = {
      message: 'Hello, world!',
    };
    setTimeout(() => {
      if (data) {
        resolve(data);
      } else {
        reject(new Error('Data not found'));
      }
    }, 1000);
  });
}
async function main() {
  const data = await fetchData();
  console.log(data.message); // Output: Hello, world!
}
main();

Վերևի օրինակում մենք սահմանեցինք fetchData ֆունկցիա, որը վերադարձնում է Promise, որը լուծում է message հատկություն ունեցող օբյեկտի հետ 1 վայրկյան ուշացումից հետո: Մենք նաև սահմանեցինք async ֆունկցիա, որը կոչվում է main, որն օգտագործում է await հիմնաբառը՝ սպասելու համար, որ fetchData Խոստումը լուծվի: Երբ Promise-ը լուծվի, մենք գրանցում ենք data.message-ը վահանակ: Ի վերջո, մենք կանչում ենք main ֆունկցիան՝ ասինխրոն կոդը գործարկելու համար:

Սխալների հետ կապված

Դուք կարող եք կարգավորել սխալները Async/wait կոդի մեջ՝ օգտագործելով try/catch բլոկը: Եթե ​​try բլոկում սխալ է տեղի ունենում, ապա գործարկվում է catch բլոկի ներսում գտնվող կոդը:

Օրինակ՝ Սխալների կառավարում

function fetchData() {
  return new Promise((resolve, reject) => {
    const data = null;
    setTimeout(() => {
      if (data) {
        resolve(data);
      } else {
        reject(new Error('Data not found'));
      }
    }, 1000);
  });
}
async function main() {
  try {
    const data = await fetchData();
    console.log(data.message); // This line won't execute
  } catch (error) {
    console.error(error.message); // Output: Data not found
  }
}
main();

Վերոնշյալ օրինակում մենք սահմանեցինք fetchData ֆունկցիա, որը վերադարձնում է խոստում, որը մերժվում է սխալի հաղորդագրությամբ: Մենք նաև սահմանեցինք async ֆունկցիա, որը կոչվում է main, որն օգտագործում է await հիմնաբառը՝ սպասելու համար, որ fetchData խոստումը մերժվի: Մենք օգտագործեցինք try/catch բլոկ՝ մերժումը կարգավորելու և սխալի հաղորդագրությունը վահանակում գրանցելու համար:

Եզրակացություն

Async/wait-ը JavaScript-ի հզոր հատկանիշ է, որը հեշտացնում է ասինխրոն ծրագրավորումը՝ թույլ տալով գրել ասինխրոն կոդ, որը նման է համաժամանակյա կոդի: Async/wait-ի հիմունքների իմացությունը, ներառյալ async և await հիմնաբառերը և սխալների մշակումը, կարևոր է JavaScript-ի ցանկացած ծրագրավորողի համար, ովքեր ցանկանում են բարելավել իրենց կոդի արդյունավետությունն ու պահպանելիությունը: Օգտագործելով Async/wait-ը ձեր նախագծերում, դուք կարող եք ստեղծել կոդ, որն ավելի հեշտ է կարդալ և հասկանալ, դարձնելով այն ավելի մատչելի այլ մշակողների համար և նվազեցնելով սխալների հավանականությունը:

Եթե ​​ձեզ դուր եկավ հոդվածը և ցանկանում եք ցույց տալ ձեր աջակցությունը, համոզվեք, որ.

👏 Ծափահարեք պատմությանը (50 ծափ)՝ օգնելու այս հոդվածը ցուցադրել

👉Հետևեք ինձ Medium կայքում

Ստուգեք ավելի շատ բովանդակություն իմ Միջին պրոֆիլում