دور ووظيفة await/async في JavaScript واستخدامها

await/async هي واحدة من أكثر الخصائص أهمية في ES7، وهي حتى الآن أفضل حل للتنفيذ المتسلسل في JS. على الرغم من أن لم يتم تضمينها في ES2016، إلا أنها ستظهر قريبًا، وهي الآن في ES-Next مرحلة 4.

لنبدأ بالأمثلة، على سبيل المثال، إذا كنا بحاجة إلى الحصول على البيانات بالترتيب: بيانات المنتجات => بيانات المستخدمين => بيانات التعليقات

صديق قديم Ajax

الكتابة التقليدية، لا تحتاج إلى شرح

// 获取产品数据
ajax('products.json', (products) => {
console.log('AJAX/products >>>', JSON.parse(products));
// 获取用户数据
ajax('users.json', (users) => {
console.log('AJAX/users >>>', JSON.parse(users));
// 获取评论数据
ajax('products.json', (comments) => {
console.log('AJAX/comments >>>', JSON.parse(comments));
});
});
});

Promise صديق قديم

Promise تم ذكره لفترة طويلة، وهو جزء من ES6. يمكن للPromise إزالة مصير برج القديمة التي يسببها callback hell، مما يجعل الكود أكثر وضوحًا.

// Promise
// 封装 Ajax，返回一个 Promise
function requestP(url) {
return new Promise(function(resolve, reject) {
ajax(url, (response) => {
resolve(JSON.parse(response));
});
});
}
// 获取产品数据
requestP('products.json').then(function(products){
console.log('Promises/products >>>', products);
});
// 获取用户数据
requestP('users.json').then(function(users){
console.log('Promises/users >>>', users);
});
// 获取评论数据
requestP('comments.json').then(function(comments){
console.log('Promises/comments >>>', comments);
});

بالطبع يمكنك استخدامPromise.all يمكن أن يكون ذلك أكثر بساطة

Promise.all([
درخواستP('products.json'),
درخواستP('users.json'),
درخواستP('comments.json')
])
.then(function(data) {
console.log('Parallel promises >>>', data);
});

صديق قوي جديد Generators

Generators هي ميزة جديدة في ES6، يمكنها إيقاف/تنفيذ الكود. yield تعني إيقاف، iterator.next تعني تنفيذ الخطوة التالية، إذا لم تكن تعرف Generators فلا تقلق، يمكنك تجاوزها مباشرة وتعلم await/async.

// Generators
function request(url) {
ajax(url, (response) => {
iterator.next(JSON.parse(response));
});
}
function *main() {
// 获取产品数据
let data = yield request('products.json');
// 获取用户数据
let users = yield request('users.json');
// 获取评论数据
let products = yield request('comments.json');
console.log('Generator/products >>>', products);
console.log('Generator/users >>>', users);
console.log('Generator/comments >>>', comments);
}
var iterator = main();
iterator.next(); 

صديق القلعة await/async

مع Promise

// 封装 Ajax，返回一个 Promise
function requestP(url) {
return new Promise(function(resolve, reject) {
ajax(url, (response) => {
resolve(JSON.parse(response));
});
});
}
(async () => {
// 获取产品数据
let data = await requestP('products.json');
// 获取用户数据
let users = await requestP('users.json');
// 获取评论数据
let products = await requestP('comments.json');
console.log('ES7 Async/products >>>', products);
console.log('ES7 Async/users >>>', users);
console.log('ES7 Async/comments >>>', comments);
});

مع Fetch API:

(async () => {
// Async/await using the fetch API
try {
// 获取产品数据
let products = await fetch('products.json');
// Parsing products
let parsedProducts = await products.json();
// 获取用户数据
let users = await fetch('users.json');
// Parsing users
let parsedUsers = await users.json();
// 获取评论数据
let comments = await fetch('comments.json');
// Parsing comments
let parsedComments = await comments.json();
console.log('ES7 Async+fetch/products >>>', parsedProducts);
console.log('ES7 Async+fetch/users >>>', parsedUsers);
کنسول لوگ('ES7 Async+fetch/comments >>>', پارسي شده‌ی كامنت‌ها);
}) چکشند (خطا) {
کنسول لوگ(خطا);
}
});

به ترتیب آرایه اجرا شود

(async () => {
ليت parallelData = در انتظار* [
درخواستP('products.json'),
درخواستP('users.json'),
درخواستP('comments.json')
];
کنسول لوگ('Async parallel >>>', parallelData);
});

دوباره با Fetch ترکیب شود

(async () => {
ليت parallelDataFetch = در انتظار* [
(در انتظار fetch('products.json')).جي اسون(),
(در انتظار fetch('users.json')).جي اسون(),
(در انتظار fetch('comments.json')).جي اسون(),
];
کنسول لوگ('Async parallel+fetch >>>', parallelDataFetch);
});

استفاده از await/async برای حل کدهای غیرانتظاری با ذهنیت همزمان بسیار خوشایند و راحت است! در مورد نقش و استفاده await/async در جاوااسکریپت اینقدر به شما معرفی می‌کنم، امیدوارم به شما کمک کند، اگر سوالی دارید، لطفاً نظر خود را بگذارید، مدیر سریع‌تر به شما پاسخ می‌دهد. در اینجا نیز از حمایت شما از وب‌سایت درس‌های ندا تشکر می‌کنم!