Treoir do thosaitheoirí ar JavaScript Asincrónach

javascript
geallúintí
AsyncAwait
Treoir do thosaitheoirí ar JavaScript Asincrónach cover image

Mura bhfuil tú ach ag tosú le ríomhchlárú, seans go bhfuil tú ag smaoineamh ar chláir mar shraith de bhlocanna seicheamhacha loighce, ina ndéanann gach bloc rud ar leith agus go n-éiríonn leis a thoradh ionas gur féidir leis an gcéad bhloc eile a reáchtáil agus mar sin de, agus le haghaidh an an chuid is mó tá an ceart agat, ritheann an chuid is mó de na cláir ar bhealach seicheamhach, ligeann an tsamhail seo dúinn cláir a thógáil atá simplí a scríobh agus a chothabháil. Tá cásanna úsáide sonracha ann, áfach, nach n-oibreodh an tsamhail sheicheamhach seo, nó nach mbeadh sé optamach. Mar shampla, smaoinigh ar fheidhmchlár léitheoir leabhar. Tá roinnt ardghnéithe ag an bhfeidhmchlár seo, mar shampla gach teagmhas d’fhocal a aimsiú, nascleanúint a dhéanamh idir leabharmharcanna, agus a leithéid. Anois, samhlaigh go bhfuil leabhar fada á léamh ag an úsáideoir faoi láthair agus go socraíonn sé cuardach a dhéanamh ar gach teagmhas d’fhocal coitianta ar nós “The”. De ghnáth tógfaidh an feidhmchlár cúpla soicind chun gach teagmhas den fhocal sin a aimsiú agus a innéacsú. I gclár seicheamhach, ní féidir leis an úsáideoir idirghníomhú leis an bhfeidhmchlár (athraigh an leathanach nó aibhsigh téacs) go dtí go mbeidh an oibríocht chuardaigh curtha i gcrích. Tá súil agam gur féidir leat a fheiceáil nach eispéireas úsáideora optamach é sin!

1

Léiríonn an léaráid gnáthshreabhadh feidhmithe feidhmchlár an léitheora leabhar. Má thionscnaíonn an t-úsáideoir oibríocht fhadtréimhseach (sa chás seo cuardach a dhéanamh ar gach teagmhas de “an” i leabhar mór), “caithfidh an feidhmchlár” ar feadh ré na hoibríochta sin ar fad. Sa chás seo, leanfaidh an t-úsáideoir ag cliceáil ar an gcéad chnaipe leabharmharc eile gan toradh ar bith go dtí go mbeidh an oibríocht chuardaigh críochnaithe agus go dtiocfaidh na hoibríochtaí go léir i bhfeidhm ag an am céanna, rud a fhágann go mbraitheann an t-úsáideoir deiridh ar fheidhmchlár lagaithe.

B'fhéidir gur thug tú faoi deara nach ionann an sampla seo i ndáiríre agus an tsamhail sheicheamhach a thugamar isteach níos luaithe. Tá sé seo amhlaidh toisc go bhfuil na hoibríochtaí anseo neamhspleách ar a chéile. Ní gá go mbeadh a fhios ag an úsáideoir faoi líon na n-eachtraí "an" chun dul chuig an gcéad leabharmharc eile, mar sin níl an t-ord ina gcuirtear na hoibríochtaí i gcrích i ndáiríre tábhachtach. Ní gá dúinn fanacht go dtiocfaidh deireadh leis an oibríocht chuardaigh sular féidir linn dul chuig an gcéad leabharmharc eile. Tá feabhas féideartha ar an sreabhadh forghníomhaithe roimhe seo bunaithe ar an loighic seo: is féidir linn an oibríocht chuardaigh fhada a reáchtáil sa chúlra, dul ar aghaidh le haon oibríochtaí ag teacht isteach, agus nuair a dhéantar an oibríocht fhada, is féidir linn an t-úsáideoir a chur in iúl go simplí. Seo a leanas an sreabhadh forghníomhaithe:

2

Leis an sreabhadh forghníomhaithe seo, tá an taithí úsáideora feabhsaithe go mór. Anois is féidir leis an úsáideoir oibríocht fhadtréimhseach a thionscnamh, leanúint ar aghaidh leis an bhfeidhmchlár a úsáid de ghnáth, agus fógra a fháil nuair a bheidh an oibríocht déanta. Is é seo bunús an chláir asincrónach.

Tacaíonn Javascript, i measc teangacha eile, leis an stíl seo de ríomhchlárú asincrónach trí APIanna fairsinge a sholáthar chun beagnach aon iompar asincrónach ar féidir leat smaoineamh air a bhaint amach. Ag deireadh an lae, ba cheart gur teanga asincrónach ó dhúchas a bheadh ​​i Javascript. Má táimid ag tagairt don sampla roimhe seo, tá an loighic asincrónach ag bun gach feidhmchlár idirghníomhaíochta úsáideora, agus tógadh Javascript go príomha le húsáid ar an mbrabhsálaí ina bhfuil an chuid is mó de na cláir ag baint le freagairt do ghníomhartha úsáideoirí.

Tabharfaidh an méid seo a leanas treoir ghearr duit ar Javascript Asincrónach:

aisghlaonna

I gclár tipiciúil, gheobhaidh tú roinnt feidhmeanna de ghnáth. Chun feidhm a úsáid, tugaimid é le sraith paraiméadair. Déanfaidh an cód feidhme toradh a fhorghníomhú agus a thabhairt ar ais, rud ar bith as an ngnáth. Aistríonn ríomhchlárú asincrónach an loighic seo beagán. Ag dul ar ais go dtí an sampla den fheidhmchlár léitheoir leabhar, ní féidir linn feidhm rialta a úsáid chun loighic na hoibríochta cuardaigh a chur i bhfeidhm ós rud é go dtógann an oibríocht méid anaithnid ama. Fillfidh feidhm rialta go bunúsach sula ndéantar an oibríocht, agus ní hé seo an iompar a bhfuilimid ag súil leis. Is é an réiteach ná feidhm eile a shonrú a chuirfear i gcrích nuair a bheidh an oibríocht chuardaigh déanta. Múnlaíonn sé seo ár gcás úsáide mar is féidir lenár gclár leanúint dá shreabhadh de ghnáth agus nuair a bheidh an oibríocht chuardaigh críochnaithe, déanfar an fheidhm shonraithe a fhorghníomhú chun an t-úsáideoir a chur ar an eolas faoi na torthaí cuardaigh. Is í an fheidhm seo a dtugaimid feidhm aisghlaoch air:

// Search occurrences function
function searchOccurrences(word, callback) {
  try {
    // search operation logic, result is in result variable
    //....
    callback(null, word, result);
  } catch (err) {
    callback(err);
  }
}

// Search occurrences callback function
function handleSearchOccurrencesResult(err, word, result) {
  if (err) {
    console.log(`Search operation for ${word} ended with an error`);
  } else console.log(`Search results for ${word}: ${result}`);
  return;
}

searchOccurrences("the", handleSearchOccurrencesResult);

Ar dtús, sainímid an fheidhm oibríochta cuardaigh, searchOccurrences. Tógann sé an focal chun cuardach a dhéanamh agus an dara paraiméadar “aisghlaoch” a bheidh mar fheidhm le feidhmiú nuair a bheidh an oibríocht cuardaigh déanta. Coinníodh feidhm na hoibríochta cuardaigh teibí d'aon ghnó, ní gá dúinn ach díriú ar an dá thoradh a d'fhéadfadh a bheith ann: is é an chéad chás inar éirigh le gach rud agus tá toradh an chuardaigh againn san athróg toraidh. Sa chás seo, ní mór dúinn ach an fheidhm aisghlao a ghlaoch leis na paraiméadair seo a leanas: is é an chéad pharaiméadar null a chiallaíonn nár tharla aon earráid, is é an dara paraiméadar an focal a cuardaíodh, agus an tríú paraiméadar agus b'fhéidir an paraiméadar is tábhachtaí de na trí cinn., mar thoradh ar an oibríocht chuardaigh.

Is é an dara cás nuair a tharlaíonn earráid, is cás é seo freisin ina ndéantar an oibríocht chuardaigh agus ní mór dúinn an fheidhm aisghlao a ghlaoch. Bainimid úsáid as bloc iarracht agus gabhála chun aon earráid a thascradh agus ní dhéanaimid ach an fheidhm aisghlao a ghlaoch leis an réad earráide ón mbloc gabhála.

Sainmhíníomar ansin an fheidhm aisghlao, handleSearchOccurrences, choinnigh muid a loighic simplí go leor. Níl ann ach teachtaireacht a phriontáil chuig an consól. Ar dtús déanaimid seiceáil ar an bparaiméadar “earráid” féachaint ar tharla aon earráid sa phríomhfheidhm. Sa chás sin, ní mór dúinn a chur in iúl don úsáideoir gur tháinig deireadh leis an oibríocht chuardaigh le hearráid. Mura n-ardaíodh aon earráid, priontálaimid teachtaireacht le toradh na hoibríochta cuardaigh.

Ar deireadh, tugaimid an fheidhm SearchOccurrences leis an bhfocal “the”. Rithfidh an fheidhm anois de ghnáth gan bac a chur ar an bpríomhchlár agus nuair a bheidh an cuardach déanta, déanfar an glao ar ais agus gheobhaidh muid an teachtaireacht toraidh leis an toradh cuardaigh nó leis an teachtaireacht earráide.

Tá sé tábhachtach a lua anseo nach bhfuil rochtain againn ach ar an athróg toraidh laistigh de na príomhfheidhmeanna agus na feidhmeanna aisghlao. Má dhéanaimid iarracht rud éigin mar seo:

let result;
function searchOccurrences(word, callback) {
  try {
    // search operation logic, result is in searchResult variable
    //....
    result = searchResult;
    callback(null, word, result);
  } catch (err) {
    callback(err);
  }
}
searchOccurrences("the", handleSearchOccurrencesResult);
console.log(result);

bheadh ​​toradh an chló neamhshainithe toisc nach bhfanann na cláir go dtí go bhfeidhmeoidh an fheidhm SearchOccurrences. Bogann sé go dtí an chéad treoir eile, is é sin an ráiteas priontála, sula sanntar athróg an toraidh laistigh den phríomhfheidhm. Mar thoradh air sin, déanfaimid an athróg toraidh neamhshannta a phriontáil.

Mar sin bunaithe ar an loighic seo, ba cheart dúinn an cód go léir a úsáideann an athróg toraidh a choinneáil taobh istigh den fheidhm aisghlao. Seans nach bhfuil an chuma air gur fadhb é seo anois ach d’fhéadfadh go n-ardóidh sé go tapa ina fhíorfhadhb. Samhlaigh an cás ina bhfuil slabhra feidhmeanna asincrónacha againn ar gá iad a rith in ord, Sa ghnáth-loighic aisghlaoite, chuirfeá rud éigin mar seo i bhfeidhm:

functionA(function (err, resA) {
  ///......
  functionB(resA, function (err, resB) {
    ///......
    functionC(resB, function (err, resC) {
      ///......
      functionD(resC, function (err, resD) {
        ///......
      });
    });
  });
});

Coinnigh i gcuimhne go bhfuil paraiméadar earráide ag gach glao ar ais agus ní mór gach earráid a láimhseáil ar leithligh. Déanann sé seo an cód thuas casta cheana féin níos casta agus níos deacra a choimeád ar bun. Tá súil agam go bhfuil Geallta anseo chun an fhadhb ifreann aisghlaoch a réiteach, clúdóimid an chéad cheann eile.

##Geallta

Tógtar gealltanais ar bharr aisghlaonna agus feidhmíonn siad ar an mbealach céanna. Tugadh isteach iad mar chuid de ghnéithe ES6 chun roinnt de na saincheisteanna glaring a réiteach le aisghlaonna mar ifreann aisghlaoch. Soláthraíonn gealltanais a bhfeidhmeanna féin a ritheann ar chríochnú rathúil (réiteach), agus nuair a tharlaíonn earráidí (diúltaigh). Taispeánann an méid seo a leanas an sampla SearchOccurrences curtha i bhfeidhm le gealltanais:

// Search occurrences function
function searchOccurrences(word) {
  return new Promise((resolve, reject) => {
    try {
      // search operation logic, result is in result variable
      //....
      resolve(word, result);
    } catch (err) {
      reject(err);
    }
  });
}

searchOccurrences("the")
  .then((word, result) => {
    console.log(`Search results for ${word}: ${result}`);
  })
  .catch((err) => {
    console.log(`Search operation ended with an error`);
  });

Rachaimid thar na hathruithe a chuireamar i bhfeidhm:

Tugann an fheidhm searchOccurrences gealltanas ar ais. Taobh istigh den ghealltanas, coinnímid an loighic chéanna: tá dhá fheidhm againn a réiteach agus a dhiúltú a léiríonn ár n-aisghlaonna seachas feidhm aisghlao amháin a bheith againn a láimhseálann feidhmiú rathúil agus cur i gcrích le hearráidí. Scarann ​​gealltanais an dá thoradh agus cuireann siad comhréir ghlan ar fáil agus an phríomhfheidhm á ghlaoch. Tá an fheidhm réitithe “factha” don phríomhfheidhm ag baint úsáide as an eochairfhocal “ansin”. Anseo ní dhéanaimid ach an dá pharaiméadar den fheidhm réitigh a shonrú agus an toradh cuardaigh a phriontáil. Baineann rud cosúil leis an bhfeidhm diúltú, is féidir é a hooked ag baint úsáide as an eochairfhocal "gabháil". Tá súil agam gur féidir leat tuiscint a fháil ar na buntáistí a bhaineann le gealltanais ó thaobh inléiteacht cóid agus glaineacht. Má tá tú fós ag plé leis, seiceáil conas is féidir linn an fhadhb ifreann aisghlaoch a réiteach trí na feidhmeanna asincrónacha a shlabhraítear le chéile chun ceann a rith i ndiaidh a chéile:

searchOccurrences("the")
  .then(searchOccurrences("asynchronous"))
  .then(searchOccurrences("javascript"))
  .then(searchOccurrences("guide"))
  .catch((err) => {
    console.log(`Search operation ended with an error`);
  });

Async/Await

Is iad Async/Await an méid is déanaí a cuireadh lenár gcreasa uirlisí asincrónach i Javascript. Agus iad tugtha isteach le ES8, cuireann siad sraith nua astarraingthe ar fáil de bhreis ar fheidhmeanna asincrónacha trí “feitheamh” go simplí le hoibríocht asincrónach a chur i gcrích. Blocann sreabhadh an chláir ag an treoir sin go dtí go gcuirtear toradh ar ais ón oibríocht asincrónach agus ansin leanfaidh an clár ar aghaidh leis an gcéad treoir eile. Má tá tú ag smaoineamh ar an sreabhadh forghníomhaithe sioncrónach tá tú ceart. Táimid tar éis teacht ciorcal iomlán! Déan sioncronú/fanacht le hiarrachtaí simplíocht ríomhchlárú sioncrónach a thabhairt go dtí an domhan asincrónach. Coinnigh i gcuimhne le do thoil nach bhfeictear é seo ach amháin i bhforghníomhú agus i gcód an chláir. Fanann gach rud mar a chéile faoin gcochall, tá Async/fanacht fós ag baint úsáide as gealltanais agus is iad aisghlaonna a bloic thógála.

A ligean ar dul thar ár sampla agus é a chur i bhfeidhm ag baint úsáide as Async / fanacht:

async function searchOccurrences(word) {
  try {
    // search operation logic, result is in result variable
    //....
    return result;
  } catch (err) {
    console.log(`Search operation for ${word} ended with an error`);
  }
}

const word = "the";

const result = await searchOccurrences(word, handleSearchOccurrencesResult);

console.log(`Search results for ${word}: ${result}`);

Níor athraigh ár gcód mórán, is é an rud tábhachtach atá le tabhairt faoi deara anseo ná an eochairfhocal “asincréite” roimh dhearbhú feidhm SearchOccurrences. Léiríonn sé seo go bhfuil an fheidhm asincrónach. Chomh maith leis sin, tabhair faoi deara an eochairfhocal “fanacht” agus tú ag glaoch ar an bhfeidhm SearchOccurrences. Treoróidh sé seo don chlár fanacht le feidhmiú na feidhme go dtí go dtabharfar an toradh ar ais sular féidir leis an gclár bogadh go dtí an chéad treoir eile, i bhfocail eile, beidh luach aischurtha na feidhme SearchOccurrences i gcónaí ag athróg an toraidh agus ní bheidh an gealltanas níl staid ar feitheamh ag an bhfeidhm, sa chiall sin, mar gheall ar Async/Await. Nuair a bheidh an cur i gcrích, bogaimid chuig an ráiteas priontála agus an uair seo tá toradh na hoibríochta cuardaigh sa toradh. De réir mar a bhíothas ag súil leis, tá an t-iompar céanna ag an gcód nua amhail is dá mbeadh sé sioncrónach.

Rud beag eile le cuimhneamh ná toisc nach bhfuil feidhmeanna aisghlao againn a thuilleadh, go gcaithfimid an earráid SearchOccurrences a láimhseáil laistigh den fheidhm chéanna toisc nach féidir linn an earráid a iomadú go dtí an fheidhm aisghlao agus í a láimhseáil ansin. Anseo nílimid ach ag priontáil teachtaireacht earráide i gcás earráide ar mhaithe leis an sampla.

Timfhilleadh suas

San Airteagal seo chuamar trí na cineálacha cur chuige éagsúla a úsáidtear chun loighic asincrónach a chur i bhfeidhm i Javascript. Thosaigh muid ag iniúchadh sampla nithiúil den fáth a mbeadh orainn aistriú ó stíl shioncrónach rialta ríomhchlárú go dtí an tsamhail asincrónach. Bhog muid ansin chuig aisghlaonna, arb iad na príomhbhloic thógála de Javascript asincrónach. Mar gheall ar theorainneacha na nglaonna ar ais tháinig muid chuig na roghanna eile a cuireadh leis thar na blianta chun na teorainneacha sin a shárú, geallúintí go príomha agus Async / ag fanacht. Is féidir loighic asincrónach a fháil áit ar bith ar an ngréasán, cibé an bhfuil tú ag glaoch ar API seachtrach, ag cur tús le ceist bhunachar sonraí, ag scríobh chuig an gcóras comhad áitiúil, nó fiú ag fanacht le hionchur úsáideora ar fhoirm logáil isteach. Tá súil agam go mbraitheann tú níos mó muiníne anois dul i ngleic leis na saincheisteanna seo trí Javascript Asincrónach atá glan agus inchothaithe a scríobh!

Más maith leat an t-alt seo, féach le do thoil ar an Blag CLA áit a ndéanaimid plé ar ábhair éagsúla ar conas dul i mbun teicneolaíochta. Chomh maith leis sin, féach ar ár cainéal youtube le haghaidh ár gceardlanna saor in aisce roimhe seo agus lean sinn ar meáin shóisialta ionas nach gcaillfidh tú amach ar na cinn atá le teacht!


Career Services background pattern

Seirbhísí Gairme

Contact Section background image

Bígí i dteagmháil

Code Labs Academy © 2024 Gach ceart ar cosaint.