მოდით გადავხედოთ Async/Wait in JavaScript-ში მაგალითების გამოყენებით

სტატიის ავტორი განიხილავს Async/Wait-ის მაგალითებს JavaScript-ში. საერთო ჯამში, Async/Await არის მოსახერხებელი გზა ასინქრონული კოდის დასაწერად. სანამ ეს ფუნქცია გამოჩნდებოდა, ასეთი კოდი იწერებოდა ზარების და დაპირებების გამოყენებით. ორიგინალური სტატიის ავტორი ავლენს Async/Await-ის უპირატესობებს სხვადასხვა მაგალითების გაანალიზებით.

შეგახსენებთ: "Habr"-ის ყველა მკითხველისთვის - ფასდაკლება 10 რუბლიდან Skillbox-ის ნებისმიერ კურსზე ჩარიცხვისას "Habr" სარეკლამო კოდის გამოყენებით.

Skillbox გირჩევთ: საგანმანათლებლო ონლაინ კურსი "ჯავას დეველოპერი".

გადმორეკე

გამოძახება არის ფუნქცია, რომლის ზარი დაგვიანებულია განუსაზღვრელი ვადით. ადრე, გამოძახებები გამოიყენებოდა კოდის იმ ადგილებში, სადაც შედეგის დაუყოვნებლივ მიღება ვერ მოხერხდა.

აქ მოცემულია ფაილის ასინქრონულად წაკითხვის მაგალითი Node.js-ში:

fs.readFile(__filename, 'utf-8', (err, data) => {
  if (err) {
    throw err;
  }
  console.log(data);
});

პრობლემები წარმოიქმნება, როდესაც თქვენ გჭირდებათ ერთდროულად რამდენიმე ასინქრონული ოპერაციის შესრულება. წარმოვიდგინოთ ეს სცენარი: მოთხოვნის გაგზავნა ხდება Arfat-ის მომხმარებელთა მონაცემთა ბაზაში, თქვენ უნდა წაიკითხოთ მისი profile_img_url ველი და ჩამოტვირთოთ სურათი Someserver.com სერვერიდან.
ჩამოტვირთვის შემდეგ სურათს გადავიყვანთ სხვა ფორმატში, მაგალითად PNG-დან JPEG-ში. თუ კონვერტაცია წარმატებული იყო, წერილი იგზავნება მომხმარებლის ელ.ფოსტაზე. შემდეგი, ინფორმაცია მოვლენის შესახებ შეიტანება transformations.log ფაილში, თარიღის მითითებით.

ღირს ყურადღების მიქცევა გამოხმაურებების გადახურვაზე და })-ის დიდ რაოდენობაზე კოდის ბოლო ნაწილში. მას ჰქვია Callback Hell ან Pyramid of Doom.

ამ მეთოდის უარყოფითი მხარეები აშკარაა:

• ამ კოდის წაკითხვა რთულია.
• ასევე რთულია შეცდომებთან გამკლავება, რაც ხშირად იწვევს კოდის ცუდ ხარისხს.

ამ პრობლემის გადასაჭრელად JavaScript-ს დაემატა დაპირებები. ისინი საშუალებას გაძლევთ შეცვალოთ გამოძახების ღრმა ბუდე სიტყვით .მაშინ.

დაპირებების დადებითი ასპექტი არის ის, რომ ისინი კოდს ბევრად უკეთ იკითხავენ, ზემოდან ქვემოდან, ვიდრე მარცხნიდან მარჯვნივ. თუმცა, დაპირებებსაც აქვს თავისი პრობლემები:

• თქვენ უნდა დაამატოთ ბევრი .მაშინ.
• try/catch-ის ნაცვლად, .catch გამოიყენება ყველა შეცდომის მოსაგვარებლად.
• რამდენიმე დაპირებაზე მუშაობა ერთი მარყუჟის ფარგლებში ყოველთვის არ არის მოსახერხებელი; ზოგიერთ შემთხვევაში, ისინი ართულებენ კოდს.

აქ არის პრობლემა, რომელიც აჩვენებს ბოლო პუნქტის მნიშვნელობას.

დავუშვათ, გვაქვს for loop, რომელიც ბეჭდავს რიცხვების თანმიმდევრობას 0-დან 10-მდე შემთხვევითი ინტერვალებით (0–n წამი). დაპირებების გამოყენებით, თქვენ უნდა შეცვალოთ ეს ციკლი ისე, რომ რიცხვები დაიბეჭდოს თანმიმდევრობით 0-დან 10-მდე. ასე რომ, თუ ნულის დაბეჭდვას სჭირდება 6 წამი და ერთის დაბეჭდვას 2 წამი, ჯერ უნდა დაიბეჭდოს ნული, შემდეგ კი. დაიწყება ათვლა ერთის დასაბეჭდად.

და რა თქმა უნდა, ამ პრობლემის მოსაგვარებლად ჩვენ არ ვიყენებთ Async/Wait ან .sort-ს. გამოსავლის მაგალითი არის ბოლოს.

ასინქრონული ფუნქციები

Async ფუნქციების დამატება ES2017-ში (ES8) გაამარტივა დაპირებებთან მუშაობის ამოცანა. მე აღვნიშნავ, რომ ასინქრონული ფუნქციები მუშაობს დაპირებების "ზედაზე". ეს ფუნქციები არ წარმოადგენს თვისობრივად განსხვავებულ ცნებებს. Async ფუნქციები გამიზნულია, როგორც კოდის ალტერნატივა, რომელიც იყენებს დაპირებებს.

Async/Await შესაძლებელს ხდის ასინქრონული კოდით მუშაობის ორგანიზებას სინქრონულ სტილში.

ამრიგად, დაპირებების ცოდნა აადვილებს Async/Wait-ის პრინციპების გაგებას.

სინტაქსი

ჩვეულებრივ, იგი შედგება ორი საკვანძო სიტყვისგან: ასინქრონული და დაელოდე. პირველი სიტყვა ფუნქციას ასინქრონულად აქცევს. ასეთი ფუნქციები იძლევა ლოდინის გამოყენების საშუალებას. ნებისმიერ სხვა შემთხვევაში, ამ ფუნქციის გამოყენება გამოიწვევს შეცდომას.

// With function declaration
 
async function myFn() {
  // await ...
}
 
// With arrow function
 
const myFn = async () => {
  // await ...
}
 
function myFn() {
  // await fn(); (Syntax Error since no async)
}
 

Async ჩასმულია ფუნქციის დეკლარაციის დასაწყისში, ხოლო ისრის ფუნქციის შემთხვევაში, "=" ნიშანსა და ფრჩხილებს შორის.

ეს ფუნქციები შეიძლება განთავსდეს ობიექტში, როგორც მეთოდები ან გამოყენებული იქნას კლასის დეკლარაციაში.

// As an object's method
 
const obj = {
  async getName() {
    return fetch('https://www.example.com');
  }
}
 
// In a class
 
class Obj {
  async getResource() {
    return fetch('https://www.example.com');
  }
}

NB! უნდა გვახსოვდეს, რომ კლასის კონსტრუქტორები და მიმღებები/დამწერები არ შეიძლება იყოს ასინქრონული.

სემანტიკა და შესრულების წესები

Async ფუნქციები ძირითადად მსგავსია სტანდარტული JS ფუნქციების, მაგრამ არის გამონაკლისები.

ამრიგად, ასინქრონული ფუნქციები ყოველთვის აბრუნებს დაპირებებს:

async function fn() {
  return 'hello';
}
fn().then(console.log)
// hello

კერძოდ, fn აბრუნებს სტრიქონს hello. კარგად, რადგან ეს ასინქრონული ფუნქციაა, სიმებიანი მნიშვნელობა შეფუთულია დაპირებაში კონსტრუქტორის გამოყენებით.

აქ არის ალტერნატიული დიზაინი Async-ის გარეშე:

function fn() {
  return Promise.resolve('hello');
}
 
fn().then(console.log);
// hello

ამ შემთხვევაში, დაპირება ბრუნდება "ხელით". ასინქრონული ფუნქცია ყოველთვის ახალ დაპირებაშია გახვეული.

თუ დაბრუნებული მნიშვნელობა არის პრიმიტიული, async ფუნქცია აბრუნებს მნიშვნელობას დაპირებაში შეფუთვით. თუ დაბრუნებული მნიშვნელობა არის დაპირების ობიექტი, მისი გარჩევადობა ბრუნდება ახალ დაპირებაში.

const p = Promise.resolve('hello')
p instanceof Promise;
// true
 
Promise.resolve(p) === p;
// true
 

მაგრამ რა მოხდება, თუ ასინქრონული ფუნქციის შიგნით არის შეცდომა?

async function foo() {
  throw Error('bar');
}
 
foo().catch(console.log);

თუ ის არ არის დამუშავებული, foo() უბრუნებს დაპირებას უარყოფით. ამ სიტუაციაში, Promise.reject, რომელიც შეიცავს შეცდომას, დაბრუნდება Promise.resolve-ის ნაცვლად.

Async ფუნქციები ყოველთვის აძლევენ დაპირებას, მიუხედავად იმისა, თუ რა დაბრუნდება.

ასინქრონული ფუნქციები ჩერდება ყოველი ლოდინის დროს.

მოლოდინი გავლენას ახდენს გამონათქვამებზე. ასე რომ, თუ გამოთქმა არის დაპირება, ასინცირების ფუნქცია შეჩერებულია დაპირების შესრულებამდე. თუ გამოთქმა არ არის დაპირება, ის გარდაიქმნება დაპირებად Promise.resolve-ის მეშვეობით და შემდეგ სრულდება.

// utility function to cause delay
// and get random value
 
const delayAndGetRandom = (ms) => {
  return new Promise(resolve => setTimeout(
    () => {
      const val = Math.trunc(Math.random() * 100);
      resolve(val);
    }, ms
  ));
};
 
async function fn() {
  const a = await 9;
  const b = await delayAndGetRandom(1000);
  const c = await 5;
  await delayAndGetRandom(1000);
 
  return a + b * c;
}
 
// Execute fn
fn().then(console.log);

და აქ არის აღწერა, თუ როგორ მუშაობს fn ფუნქცია.

• დარეკვის შემდეგ, პირველი ხაზი გარდაიქმნება const a = await 9-დან; in const a = ველოდები Promise.resolve(9);.
• Await-ის გამოყენების შემდეგ, ფუნქციის შესრულება შეჩერებულია მანამ, სანამ a არ მიიღებს თავის მნიშვნელობას (მიმდინარე სიტუაციაში არის 9).
• delayAndGetRandom(1000) აჩერებს fn ფუნქციის შესრულებას, სანამ ის არ დასრულდება (1 წამის შემდეგ). ეს ეფექტურად აჩერებს fn ფუნქციას 1 წამით.
• delayAndGetRandom(1000) via solution აბრუნებს შემთხვევით მნიშვნელობას, რომელიც შემდეგ ენიჭება b ცვლადს.
• ისე, c ცვლადის შემთხვევა მსგავსია a ცვლადის შემთხვევისა. ამის შემდეგ ყველაფერი ჩერდება წამით, მაგრამ ახლა delayAndGetRandom(1000) არაფერს აბრუნებს, რადგან ეს არ არის საჭირო.
• შედეგად, მნიშვნელობები გამოითვლება ფორმულის გამოყენებით a + b * c. შედეგი შეფუთულია დაპირებაში Promise.resolve-ის გამოყენებით და დაბრუნდება ფუნქციით.

ეს პაუზები შეიძლება მოგაგონებთ გენერატორებს ES6-ში, მაგრამ არის რაღაც ამაში შენი მიზეზები.

პრობლემის გადაჭრა

კარგად, ახლა მოდით გადავხედოთ ზემოთ ნახსენები პრობლემის გადაწყვეტას.

finishMyTask ფუნქცია იყენებს Await-ს, რათა დაელოდოს ისეთი ოპერაციების შედეგებს, როგორიცაა queryDatabase, sendEmail, logTaskInFile და სხვა. თუ ამ გადაწყვეტას შევადარებთ იმას, სადაც დაპირებები იყო გამოყენებული, მსგავსება აშკარა გახდება. თუმცა, Async/Await ვერსია მნიშვნელოვნად ამარტივებს ყველა სინტაქსურ სირთულეს. ამ შემთხვევაში, არ არის დიდი რაოდენობით გამოძახებები და ჯაჭვები, როგორიცაა .then/.catch.

აქ არის გამოსავალი რიცხვების გამოყვანით, არსებობს ორი ვარიანტი.

const wait = (i, ms) => new Promise(resolve => setTimeout(() => resolve(i), ms));
 
// Implementation One (Using for-loop)
const printNumbers = () => new Promise((resolve) => {
  let pr = Promise.resolve(0);
  for (let i = 1; i <= 10; i += 1) {
    pr = pr.then((val) => {
      console.log(val);
      return wait(i, Math.random() * 1000);
    });
  }
  resolve(pr);
});
 
// Implementation Two (Using Recursion)
 
const printNumbersRecursive = () => {
  return Promise.resolve(0).then(function processNextPromise(i) {
 
    if (i === 10) {
      return undefined;
    }
 
    return wait(i, Math.random() * 1000).then((val) => {
      console.log(val);
      return processNextPromise(i + 1);
    });
  });
};

და აქ არის გამოსავალი ასინქრონული ფუნქციების გამოყენებით.

async function printNumbersUsingAsync() {
  for (let i = 0; i < 10; i++) {
    await wait(i, Math.random() * 1000);
    console.log(i);
  }
}

შეცდომის დამუშავება

დაუმუშავებელი შეცდომები უარყოფილ დაპირებაშია გახვეული. თუმცა, ასინქრონულ ფუნქციებს შეუძლიათ გამოიყენონ try/catch შეცდომების სინქრონულად მოსაგვარებლად.

async function canRejectOrReturn() {
  // wait one second
  await new Promise(res => setTimeout(res, 1000));
 
// Reject with ~50% probability
  if (Math.random() > 0.5) {
    throw new Error('Sorry, number too big.')
  }
 
return 'perfect number';
}

canRejectOrReturn() არის ასინქრონული ფუნქცია, რომელიც ან წარმატებით მუშაობს („იდეალური რიცხვი“) ან მარცხდება შეცდომით („ბოდიში, რიცხვი ძალიან დიდია“).

async function foo() {
  try {
    await canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

ვინაიდან ზემოთ მოყვანილი მაგალითი მოელის canRejectOrReturn-ის შესრულებას, მისივე წარუმატებლობა გამოიწვევს catch ბლოკის შესრულებას. შედეგად, ფუნქცია foo დასრულდება ან განუსაზღვრელი (როდესაც არაფერი დაბრუნდა try ბლოკში) ან დაფიქსირებული შეცდომით. შედეგად, ეს ფუნქცია არ ჩავარდება, რადგან try/catch თავად გაუმკლავდება ფუნქციას foo.

აი კიდევ ერთი მაგალითი:

async function foo() {
  try {
    return canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

ღირს ყურადღება მიაქციოთ იმ ფაქტს, რომ მაგალითში, canRejectOrReturn დაბრუნდა foo-დან. Foo ამ შემთხვევაში ან სრულდება სრულყოფილი რიცხვით ან აბრუნებს შეცდომას („ბოდიში, ნომერი ძალიან დიდია“). დაჭერის ბლოკი არასოდეს შესრულდება.

პრობლემა ის არის, რომ foo აბრუნებს canRejectOrReturn-დან მიღებულ დაპირებას. ასე რომ, გამოსავალი foo ხდება გამოსავალი canRejectOrReturn. ამ შემთხვევაში, კოდი შედგება მხოლოდ ორი ხაზისგან:

try {
    const promise = canRejectOrReturn();
    return promise;
}

აი, რა მოხდება, თუ იყენებთ მოლოდინს და ერთად დაბრუნდებით:

async function foo() {
  try {
    return await canRejectOrReturn();
  } catch (e) {
    return 'error caught';
  }
}

ზემოთ მოცემულ კოდში, foo წარმატებით გამოვა როგორც სრულყოფილი ნომრით, ასევე დაფიქსირებული შეცდომით. აქ უარი არ იქნება. მაგრამ foo დაბრუნდება canRejectOrReturn-ით და არა განუსაზღვრელით. მოდით დავრწმუნდეთ ამაში დაბრუნების await canRejectOrReturn() ხაზის წაშლით:

try {
    const value = await canRejectOrReturn();
    return value;
}
// …

საერთო შეცდომები და ხარვეზები

ზოგიერთ შემთხვევაში, Async/Await-ის გამოყენებამ შეიძლება გამოიწვიოს შეცდომები.

დავიწყებული ელოდება

ეს ხდება საკმაოდ ხშირად - ლოდინის საკვანძო სიტყვა დავიწყებულია დაპირებამდე:

async function foo() {
  try {
    canRejectOrReturn();
  } catch (e) {
    return 'caught';
  }
}

როგორც ხედავთ, კოდში არ არის ლოდინი ან დაბრუნება. ამიტომ foo ყოველთვის გამოდის განუსაზღვრელით 1 წამის დაგვიანების გარეშე. მაგრამ დაპირება შესრულდება. თუ შეცდომა ან უარყოფა, მაშინ გამოიძახება UnhandledPromiseRejectionWarning.

ასინქრონული ფუნქციები გამოძახებებში

Async ფუნქციები საკმაოდ ხშირად გამოიყენება .map-ში ან .filter-ში, როგორც გამოხმაურება. ამის მაგალითია fetchPublicReposCount(username) ფუნქცია, რომელიც აბრუნებს GitHub-ზე ღია საცავების რაოდენობას. ვთქვათ, არის სამი მომხმარებელი, რომელთა მეტრიკა გვჭირდება. აქ არის ამ ამოცანის კოდი:

const url = 'https://api.github.com/users';
 
// Utility fn to fetch repo counts
const fetchPublicReposCount = async (username) => {
  const response = await fetch(`${url}/${username}`);
  const json = await response.json();
  return json['public_repos'];
}

ჩვენ გვჭირდება ArfatSalman, octocat, norvig ანგარიშები. ამ შემთხვევაში ჩვენ ვაკეთებთ:

const users = [
  'ArfatSalman',
  'octocat',
  'norvig'
];
 
const counts = users.map(async username => {
  const count = await fetchPublicReposCount(username);
  return count;
});

ღირს ყურადღება მიაქციოთ Await-ს .რუქის გამოძახებაში. აქ ითვლის არის დაპირებების მთელი რიგი და .map არის ანონიმური გამოძახება თითოეული მითითებული მომხმარებლისთვის.

მოლოდინის ზედმეტად თანმიმდევრული გამოყენება

ავიღოთ ეს კოდი მაგალითად:

async function fetchAllCounts(users) {
  const counts = [];
  for (let i = 0; i < users.length; i++) {
    const username = users[i];
    const count = await fetchPublicReposCount(username);
    counts.push(count);
  }
  return counts;
}

აქ რეპო ნომერი მოთავსებულია count ცვლადში, შემდეგ ეს რიცხვი ემატება counts მასივს. კოდის პრობლემა ის არის, რომ სანამ პირველი მომხმარებლის მონაცემები არ მოვა სერვერიდან, ყველა მომდევნო მომხმარებელი იქნება ლოდინის რეჟიმში. ამრიგად, მხოლოდ ერთი მომხმარებელი მუშავდება ერთდროულად.

თუ, მაგალითად, ერთი მომხმარებლის დამუშავებას სჭირდება დაახლოებით 300 ms, მაშინ ყველა მომხმარებლისთვის ეს უკვე მეორეა; დახარჯული დრო ხაზობრივად დამოკიდებულია მომხმარებელთა რაოდენობაზე. მაგრამ ვინაიდან რეპოს რაოდენობის მიღება ერთმანეთზე არ არის დამოკიდებული, პროცესების პარალელიზება შესაძლებელია. ეს მოითხოვს მუშაობას .map-თან და Promise.all-თან:

async function fetchAllCounts(users) {
  const promises = users.map(async username => {
    const count = await fetchPublicReposCount(username);
    return count;
  });
  return Promise.all(promises);
}

Promise.all იღებს დაპირებების მთელ რიგს, როგორც შეყვანის სახით და აბრუნებს დაპირებას. ეს უკანასკნელი მასივის ყველა დაპირების დასრულების შემდეგ ან პირველ უარყოფაზე, დასრულებულია. შეიძლება მოხდეს, რომ ყველა ერთდროულად არ დაიწყოს - იმისათვის, რომ უზრუნველყოთ ერთდროული დაწყება, შეგიძლიათ გამოიყენოთ p-map.

დასკვნა

ასინქრონული ფუნქციები სულ უფრო მნიშვნელოვანი ხდება განვითარებისთვის. ისე, ასინქრონული ფუნქციების ადაპტური გამოყენებისთვის, თქვენ უნდა გამოიყენოთ ასინქრონული იტერატორები. JavaScript-ის დეველოპერი კარგად უნდა ერკვეოდეს ამაში.

Skillbox გირჩევთ:

• პრაქტიკული კურსი "Mobile Developer PRO".
• მიმართა ონლაინ კურსს "მონაცემების ანალიტიკოსი პითონში".
• ორწლიანი პრაქტიკული კურსი "მე ვარ ვებ დეველოპერი PRO".

წყარო: www.habr.com