What's new

Ano ang async at await sa REACT js

Wu_Fei

Forum Veteran
Elite
Joined
Jul 25, 2021
Posts
801
Reaction
795
Points
932
good day po ..

tanong ko lang po sana kung ano po ibig sabihin ng "async" at "await" po sa React Js po..

nag aaral po kasi ako ng React Js .. meju nalilito po ako kung para saan po itong dalawang ito ...

kung bakit po sila nilalagay .. ano meaning po nila .. in laymans term or tagalog po ..

salamat po
 
Alternative po yan sa .then().catch(). Mas cleaner lng look

Naka tandem kasi ang async await, kung gagamit ka nang await (like await axios.()) kailangan e async mo ang functions na naka balot sa await.

Kaya tinatawag siya ng async kasi late mag response ang async kaysa normal codes.

Imagine mo nalang, naka sync lahat ang codes pero meron fetch sa api. Lagyan ng dalawang scenario.
  • Mag execute lahat ang codes, pero late nag response ang fetch api function. paano e lagay ang data sa variable kung natapos na lahat ang execution.
  • Mag execute ang codes pero mag wait sa fetch api (blocking method), matatagalan pa mag fetch pero sayang ang time na walang mangyayari sa codes dahil lng nag wait fetch api.
 
Last edited:
Async label lang sa function para makapag await ka inside. Or asynchronous yung function

Meaning sa mga mag call ng function need nila mag await, para makuha nila yung return, and pwedenka rin mag await sa loob ng function

Think it like this

I have a function
Code:
async function getName()
I call it

const name = getName()
Pag nag console log ka, ang makukuha mo is 'Promise'

Meaning hindi pa nya tapos gawin or ma compute yung function

So pag nilagyan mo ng await, literal mag wait sya matapos yung function bago mag proceed sa next line ng code

Sa iba mas trip nila synchronous programming
Ang advantage kasi ng asynchronous, pwede mo pag sabay sabayin i execute tyaka ka mag wait


Search ka nalang ng asynchronous vs synchronous programming


Code:
Parang ganto lang naman yun in theory

Synchronous

Execute
Wait
Execute
Wait
Execute
Wait
Done
Total time : 3s

Asynchronous
Execute
Execute
Execute
Wait all
Done
Total time 1s

Note hindi tama yung time
Representation lang

In short asynchronous nag allow sya na mag execute in parallel
Or do other things while waiting

Unlike sa synchronous need mo talaga mag antay
 
Last edited:
Async label lang sa function para makapag await ka inside. Or asynchronous yung function

Meaning sa mga mag call ng function need nila mag await, para makuha nila yung return, and pwedenka rin mag await sa loob ng function

Think it like this

I have a function
Code:
async function getName()
I call it

const name = getName()
Pag nag console log ka, ang makukuha mo is 'Promise'

Meaning hindi pa nya tapos gawin or ma compute yung function

So pag nilagyan mo ng await, literal mag wait sya matapos yung function bago mag proceed sa next line ng code

Sa iba mas trip nila synchronous programming
Ang advantage kasi ng asynchronous, pwede mo pag sabay sabayin i execute tyaka ka mag wait


Search ka nalang ng asynchronous vs synchronous programming


Code:
Parang ganto lang naman yun in theory

Synchronous

Execute
Wait
Execute
Wait
Execute
Wait
Done
Total time : 3s

Asynchronous
Execute
Execute
Execute
Wait all
Done
Total time 1s

Note hindi tama yung time
Representation lang

In short asynchronous nag allow sya na mag execute in parallel
Or do other things while waiting

Unlike sa synchronous need mo talaga mag antay
Salamat po..meju na kaka ideya na po aku..

Alternative po yan sa .then().catch(). Mas cleaner lng look

Naka tandem kasi ang async await, kung gagamit ka nang await (like await axios.()) kailangan e async mo ang functions na naka balot sa await.

Kaya tinatawag siya ng async kasi late mag response ang async kaysa normal codes.

Imagine mo nalang, naka sync lahat ang codes pero meron fetch sa api. Lagyan ng dalawang scenario.
  • Mag execute lahat ang codes, pero late nag response ang fetch api function. paano e lagay ang data sa variable kung natapos na lahat ang execution.
  • Mag execute ang codes pero mag wait sa fetch api (blocking method), matatagalan pa mag fetch pero sayang ang time na walang mangyayari sa codes dahil lng nag wait fetch api.
Salamat po sa ideya

Alternative po yan sa .then().catch(). Mas cleaner lng look

Naka tandem kasi ang async await, kung gagamit ka nang await (like await axios.()) kailangan e async mo ang functions na naka balot sa await.

Kaya tinatawag siya ng async kasi late mag response ang async kaysa normal codes.

Imagine mo nalang, naka sync lahat ang codes pero meron fetch sa api. Lagyan ng dalawang scenario.
  • Mag execute lahat ang codes, pero late nag response ang fetch api function. paano e lagay ang data sa variable kung natapos na lahat ang execution.
  • Mag execute ang codes pero mag wait sa fetch api (blocking method), matatagalan pa mag fetch pero sayang ang time na walang mangyayari sa codes dahil lng nag wait fetch api.
Merun po aku nakita ndi po naka tandem si async sa await.. mag isa lang si async ginamit po sa function

ano po meaning ng 'await' ditu?

let res=await fetch('localhost:3000')


ibig sabihin po ba nito mga we-wait ma fetch yung laman na data sa localhost?

parang nag order po ng fud sa resto tapos mag wait si customer na ma dala lahat ng fud nya po?

salamat po
 
Last edited:
ano po meaning ng 'await' ditu?

let res=await fetch('localhost:3000')


ibig sabihin po ba nito mga we-wait ma fetch yung laman na data sa localhost?

parang nag order po ng fud sa resto tapos mag wait si customer na ma dala lahat ng fud nya po?

salamat po
yes po

fetch like dinala nung waiter sa cook yung order
nag await ka. nag wait ka till dalhin ng waiter yung food papunta sayo
 

Similar threads

Back
Top