JavaScript حديث غير متزامن مع Async و Await

اكتشف الطريقة الحديثة للوظائف غير المتزامنة في JavaScript. تطورت JavaScript في وقت قصير جدًا من عمليات الاسترجاعات إلى Promises ، ومنذ ES2017 أصبحت JavaScript غير المتزامنة أبسط مع بناء الجملة غير المتزامن / انتظار

مقدمة

JavaScriptتطورت في وقت قصير جدًا من عمليات الاسترجاعات إلىوعود(ES2015) ، ومنذ ذلك الحينES2017جافا سكريبت غير المتزامن هو أبسط مع بناء الجملة غير المتزامن / انتظار.

وظائف غير متزامنة هي مزيج من الوعود ومولدات كهرباء، وهم في الأساس تجريد أعلى من الوعود. دعني أكرر:غير متزامن / انتظار مبني على الوعود.

لماذا تم تقديم غير متزامن / انتظار؟

إنها تقلل من الصيغة المعيارية للوعود ، و "لا تكسر السلسلة" من قيود تسلسل الوعود.

عندما تم تقديم الوعود في ES2015 ، كانت تهدف إلى حل مشكلة مع التعليمات البرمجية غير المتزامنة ، وقد فعلوا ذلك ، ولكن على مدار العامين اللذين فصلتا ES2015 و ES2017 ، كان من الواضحلا يمكن أن تكون الوعود الحل النهائي.

تم تقديم وعود لحل المشهوررد الجحيممشكلة ، لكنهم أدخلوا التعقيد من تلقاء أنفسهم ، والتعقيد النحوي.

لقد كانوا بدائيين جيدين يمكن حولهم عرض بنية أفضل للمطورين ، لذلك عندما حان الوقت ، وصلناوظائف غير متزامنة.

إنهم يجعلون الشفرة تبدو وكأنها متزامنة ، لكنها غير متزامنة ولا تحظر وراء الكواليس.

كيف تعمل

ترجع الدالة غير المتزامنة وعدًا ، كما في هذا المثال:

const doSomethingAsync = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve('I did something'), 3000)
  })
}

عندما تريدمكالمةهذه الوظيفة التي تقوم بها مسبقاawait، وسيتوقف رمز الاتصال حتى يتم الوفاء بالوعد أو رفضه. تحذير واحد: يجب تعريف وظيفة العميل على أنهاasync. هذا مثال:

const doSomething = async () => {
  console.log(await doSomethingAsync())
}

مثال سريع

هذا مثال بسيط على استخدام غير متزامن / انتظار لتشغيل دالة بشكل غير متزامن:

const doSomethingAsync = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve('I did something'), 3000)
  })
}

const doSomething = async () => { console.log(await doSomethingAsync()) }

console.log(‘Before’) doSomething() console.log(‘After’)

سيطبع الكود أعلاه ما يلي إلى وحدة تحكم المتصفح:

Before
After
I did something //after 3s

Promise all the things

Prepending the async keyword to any function means that the function will return a promise.

Even if it’s not doing so explicitly, it will internally make it return a promise.

This is why this code is valid:

const aFunction = async () => {
  return 'test'
}

aFunction().then(alert) // This will alert ‘test’

and it’s the same as:

const aFunction = async () => {
  return Promise.resolve('test')
}

aFunction().then(alert) // This will alert ‘test’

The code is much simpler to read

As you can see in the example above, our code looks very simple. Compare it to code using plain promises, with chaining and callback functions.

And this is a very simple example, the major benefits will arise when the code is much more complex.

For example here’s how you would get a JSON resource, and parse it, using promises:

const getFirstUserData = () => {
  return fetch('/users.json') // get users list
    .then(response => response.json()) // parse JSON
    .then(users => users[0]) // pick first user
    .then(user => fetch(`/users/${user.name}`)) // get user data
    .then(userResponse => userResponse.json()) // parse JSON
}

getFirstUserData()

And here is the same functionality provided using await/async:

const getFirstUserData = async () => {
  const response = await fetch('/users.json') // get users list
  const users = await response.json() // parse JSON
  const user = users[0] // pick first user
  const userResponse = await fetch(`/users/${user.name}`) // get user data
  const userData = await userResponse.json() // parse JSON
  return userData
}

getFirstUserData()

Multiple async functions in series

Async functions can be chained very easily, and the syntax is much more readable than with plain promises:

const promiseToDoSomething = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve('I did something'), 10000)
  })
}

const watchOverSomeoneDoingSomething = async () => { const something = await promiseToDoSomething() return something + ’ and I watched’ }

const watchOverSomeoneWatchingSomeoneDoingSomething = async () => { const something = await watchOverSomeoneDoingSomething() return something + ’ and I watched as well’ }

watchOverSomeoneWatchingSomeoneDoingSomething().then(res => { console.log(res) })

Will print:

I did something and I watched and I watched as well

Easier debugging

Debugging promises is hard because the debugger will not step over asynchronous code.

Async/await makes this very easy because to the compiler it’s just like synchronous code.


More js tutorials: