۵۰ درصد تخفیف ویژه برای همه دوره‌ها تا پایان هفته

فرآیندهای Asynchronous در جاوااسکریپت

 

دانلود ویدیو

 

جاوااسکریپت یک زبان برنامه نویسی Single Thread است و تنها قادر به انجام یک کار در واحد همان زمان می‌باشد. اما در برنامه نویسی، بخصوص هنگام کار با وب، بسیاری از کارها وجود دارند که به طور همزمان انجام نمی‌شوند. به عنوان مثال وقتی که یک درخواست Http را ارسال می کنیم.

چگونه می‌توان با جاوااسکریپت تنها یک کار را همزمان انجام می‌دهد کار کنیم؟ جواب آسان است: فرآیندهای Asynchronous در جاوااسکریپت به محیط اجرای برنامه یعنی مرورگر یا Node.js سپرده می‌شود. 

در نتیجه فقط به این محیط اجازه داده می‌شود تا بداند که دقیقا چه کاری باید انجام شود. به عنوان مثال کدام تابع را باید اجرا کند تا بتواند از نتیجه آن استفاده کند. برای همین، جاوااسکریپت از توابع Callback استفاده می‌کند.

 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
setTimeout(msg, 5000)
console.log('...')
function msg() {
console.log('Message')
}
setTimeout(msg, 5000) console.log('...') function msg() { console.log('Message') }
setTimeout(msg, 5000)

console.log('...')

function msg() {
  console.log('Message')
}

 

یکی از امکانات جاوااسکریپت برای کار با مفاهیم Asynchronous استفاده از Promise ها است.

 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const sendRequest = () => {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => {
return response.json()
})
.then((response) => {
console.log(response)
})
.catch((err) => {
console.log('Error')
console.log(err)
})
}
sendRequest()
const sendRequest = () => { fetch('https://jsonplaceholder.typicode.com/posts/1') .then((response) => { return response.json() }) .then((response) => { console.log(response) }) .catch((err) => { console.log('Error') console.log(err) }) } sendRequest()
const sendRequest = () => {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then((response) => {
      return response.json()
    })
    .then((response) => {
      console.log(response)
    })
    .catch((err) => {
      console.log('Error')
      console.log(err)
    })
}

sendRequest()

 

در صورتی که برای این مثال بخواهیم از توابع Async/Await استفاده کنیم، کد ما به این صورت خواهد بود:

 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const sendRequest = async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
const responseData = await response.json()
console.log(responseData)
}
sendRequest()
const sendRequest = async () => { const response = await fetch('https://jsonplaceholder.typicode.com/posts/1') const responseData = await response.json() console.log(responseData) } sendRequest()
const sendRequest = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')

  const responseData = await response.json()

  console.log(responseData)
}

sendRequest()

 

[button class=”github-btn” href=”http://frontcast.ir/async-programming-javascript”]سیر تکامل برنامه‌نویسی ناهمگام در جاوااسکریپت[/button]

 

دیدگاه‌ها:

افزودن دیدگاه جدید