Casharka casriga ah ee JavaScript: Ballanqaadyada, async/sugid, iyo API-yada

La barnaamijka asynchronous ee JavaScript waxay noqotay lagama maarmaan horumarinta shabakada casriga ah: Codsiyada API, gelitaanka databaseAkhrinta faylalka ama qalliin kasta oo qaadata wax ka badan daqiiqad waxay ku xiran tahay inay ka ilaaliso is-dhexgalka si habsami leh. Waad ku mahadsan tahay ballanqaadyada, async/sugid iyo API-yada Waxaan haynaa qalab aad u awood badan oo lagu xakameynayo socodkaas iyada oo aan la xannibin codsiga.

Muddo sanado ah qaabka ayaa inta badan la isticmaalayey dib u celin iyo balamo xidhxidhankuwaas oo, in kasta oo ay si fiican u shaqeeyaan, waxay ku dhamaan karaan sumcadda xun ee "callback hell" ama silsiladaha aan dhammaadka lahayn ee .then() y .catch() adag tahay in la raaco. Iyadoo imaatinka async/ku sug ECMAScript 2017JavaScript waxa ay sare u kacday akhriska, taas oo u oggolaanaysa in koodka asynchronous lagu qoro qaab ku dhawaad ​​la mid ah koodka isku midka ah ee soo jireenka ah.

Waa maxay barnaamijka asynchronous ee JavaScript iyo sababta ay muhiim u tahay?

La barnaamijka asynchronous Waa hab loo habeeyo code si ay hawshu u bilaabato oo barnaamijku u sii wado fulinta waxyaabo kale iyada oo aan la helin "la qaboojiyey" oo la sugo jawaabta. JavaScript dhexdeeda, tani waa muhiim sababtoo ah luqaddu waxay ku socotaa browserka iyo gudaha Node.js, on a dunta muhiimka ah ee keli ah kaas oo ka hadlaya macquulka iyo interface labadaba.

Markaad tuurto a Codsiga HTTP ee APIMarkaad akhrido fayl ama aad waydiiso xog-ururin, hawlgalladani waxay qaadan karaan meel kasta min millise- seconds ilaa dhowr ilbiriqsi. Haddii ay isku mid yihiin, isticmaaluhu waxa uu arki lahaa bogga oo xidhan oo aan awoodin in uu dhexgalo. Qaabka asynchronous-ka ah, matoorka JavaScript wuxuu u wakiishay hawlahan wuxuuna sii wadan karaa shaqada inta lagu jiro. rinjiyeynta UI, maaraynta dhacdooyinka, iyo socodsiinta qoraallada kale.

Asal ahaan, habka caadiga ah ee ka falcelinta marka hawlgalku dhamaado waxay ahayd in la gudbo a shaqada dib u soo celinta dood ahaan. Hawshaas ayaa la fuliyay mar dambe iyadoo leh natiijada ama khaladka. Dhibaatadu waxay tahay, iyada oo silsiladda dib-u-celinta soo celinta kale, laga baqo cadaabta dib u yeedhakood : kood aad u badan, oo ay adagtahay in la akhriyo, wax laga saxo oo la ilaaliyo.

Si loo xalliyo qaar ka mid ah qalalaasahaas, waxa soo baxay: ballanqaadyoKaas oo soo koobaya natiijada qalliin aan la wada socon oo oggolow in ficillada lagu xidho silsilado .then() kuna maamul guuldarrooyinka .catch()Tani waxay horeyba u ahayd horumar weyn, laakiin wali waxay ka tagtay koodka buuxa ee dib-u-celinta "la daboolay" hababkaas.

Ballanqaadyada: aasaaska async / sugitaanka

Kahor inta aadan fahmin async/sugidda, waxaa lama huraan ah in si cad loo caddeeyo waxa a ballan JavaScriptBallanqaadku waa shay matalaysa natiijada mustaqbalka ee qalliin aan is-raacin: wax aan weli dhicin balse dhici doona hadhow, ama si guul leh ama aan lagu guulaysan.

Una balan qaadka caadiga ah waxaa laga heli karaa mid ka mid ah saddexda gobol ee si wanaagsan loo qeexay: la sugayo (ilaa) inta uu hawlgalku socdo, la dhamaystiray (oofiyey) marka ay si fiican u dhamaato oo ay soo saarto qiime, ama la diido (diiday) marka ay fashilanto oo ay dhaliso khalad. Taasi xaalada balanta go'aaminaaya soo celinta wicitaanada xiga ee la fulin doono.

Markaad abuurto ballan adoo isticmaalaya dhajiye PromiseWaxaad u gudbisaa hawl la fulin karo oo hesha laba doodood: resolve y rejectHaddii qalliinku si fiican u socdo, wac resolve(valor)Haddii dhibaato dhacdo, waad wacdaa reject(error)Kadib, dibadda, waxaad isticmaali kartaa miPromesa.then() si loo farsameeyo natiijada iyo .catch() si loo maareeyo khaladaadka.

Marka lagu daro ballanqaadyada gacanta lagu sameeyay, API-yo badan oo casri ah oo horeyba u jiray Waxay oofiyaan ballan-qaad taxane ah.. Waxqabadka fetch()Tusaale ahaan, waxay bilawday codsi HTTP oo isla markiiba soo celisa ballan ugu dambeyntii shay ku xallin doona. Response ama diido haddii ay jirto cillad shabakad.

Si loola shaqeeyo hawlo badan oo isbarbar socda, JavaScript wuxuu bixiyaa utility sida Promise.all()Habkani waxa uu qaadaa balamo kala duwan waxa uuna soo celinayaa balan qaad cusub oo xaliya kaliya marka balamaha oo dhan ay si guul ah u dhamaadaan, ama la diido hadii mid ka mid ah uu guul dareysto. Tani waxay si gaar ah faa'iido u leedahay markaad rabto isku darka xogta ilo kala duwan ka hor intaanan sii socon.

Fikradaha muhiimka ah: async, sug, iyo qaabka qaladka

macnaha guud ee async/sugi waxa lagu dhisay balamoIyaga ma beddesho. Waxa ay qabato ayaa ah in ay bixiso hab ku habboon, oo cad, oo ku dhow barnaamijyada isku midka ah, si ay ula shaqeyso iyaga, yaraynta dhawaaqa muuqaalka .then() silsilado.

Ereyga muhiimka ah async Waxaa la hor dhigaa shaqo ka hor si loogu sheego mishiinka JavaScript in shaqadu si isku mid ah u shaqayn doonto iyo in, wax kasta oo gudaha ka dhaca, mar walba oofin doona ballanXitaa haddii aad soo celiso qiime caadi ah, matoorku si toos ah ayuu u duubi doonaa Promise.resolve(valor).

Dhankeeda, ereyga la xafiday await waxa kaliya oo loo isticmaali karaa shaqo lagu sheegay sida asyncShaqadeedu waa in ay hakiso fulinta hawshaas gudaheeda ilaa inta ballankii loo maray laga fulinayo. la xaliyo ama la diido, si toos ah u soo celinta qiimaha la xaliyay ama tuurista ka reeban haddii ballanku ku dhammaado qalad.

marka aad isticmaasho await promesa Ballanqaadkuna wuu xalliyaa, waxaad helaysaa natiijada sida haddii ay tahay wicitaan isku mid ah. Haddii taa beddelkeeda ballantii la diido, Wax ka reeban ayaa meeshaas ka dhashay., oo u dhiganta samaynta a throw errorTani waxay u oggolaanaysaa dib-u-isticmaalka isla qaab-dhismeedyada maaraynta khaladaadka sida koodka isku midka ah, sida try..catch.

Adigoo ku duubaya wicitaankeena isku midka ah block try { ... } catch (error) { ... }Waxaan qaban karnaa kiisaska mid ka mid ah ballamihii uu ku guuldareysto, u soo bandhigno farriimaha ku habboon isticmaalaha, ama aan sameyno go'aamo ay ka mid yihiin dib-u-dejinta, dib u habeynta, ama gelida guuldarada nidaamka dibadda.

Erayga muhiimka ah async: hawlo mar walba soo noqda balamaha

Goobta async shaqo horteeda Tani waxay leedahay laba cawaaqib oo aad u muhiim ah: dhinaca kale, waxay ku qasbeysaa qiimaha soo noqoshada inuu had iyo jeer noqdo ballan; Dhanka kale, waxay awood u leedahay isticmaalka await gudaha jidhka shaqadaas, kaas oo si buuxda u bedelaya sida socodka asynchronous u habaysan yahay.

Haddii aad ku dhawaaqdo wax la mid ah async function sumar() { return 1; }Inkasta oo ay u ekaan karto shaqo caadi ah, waxa aad dhab ahaantii helaysaa waa a shaqo soo celinaysa ballan hore loo xaliyay geesinimo leh 1Ka baxsan nidaamkaaga, waxaad u baahan doontaa inaad natiijadaas gasho adigoo isticmaalaya await sumar() ama leh sumar().then() haddii aad doorbidayso qaabka silsiladda ah.

Waxa kale oo aad si cad uga soo celin kartaa ballan hawleed. async, tusaale ahaan return Promise.resolve(1);dhaqankuna wuxuu ahaan doonaa mid la mid ah. Labada xaaladoodba, shaqadu waxay la socotaa qaabka ballan-qaadka, kaas oo fududeynaya isku-darka hawlaha kale ee asynchronous iyo utility sida. Promise.all().

Waa wax caadi ah in, marka aan bilaabayno, aan iloobo in aan calaamadeyno hawl sidan oo kale ah async haddana waan isticmaalnaa await gudahaXaaladdaas, JavaScript waxay tuuri doontaa qalad syntax oo muujinaya taas await Tani waxay ku ansaxaysaa oo kaliya hawlaha asynchronous (ama qaybo ka taageeraya heer sare). Fariintani waa xasuusin taas async y await mar walba waa ay wada socdaan.

Deegaannada aynaan isticmaalin modules ama ay tahay inaan taageerno daalacashada hore, waxaa jira qaab baahsan oo ka kooban ku duub koodhka gudaha hawl asyn iskeed u fulinaysawax la mid ah (async () => { ... })();Sidan oo kale, baloogga oo dhami waxa uu ahaanayaa mid ku dhex jira xaalad aan la wada soconin iyada oo aan "wax wasakhayn" meeraha caalamiga ah.

Sida sugiddu u shaqeyso iyo waxa ay dhab ahaantii ku qabato ballanqaadyada

Isbeddelka dhabta ah ee maskaxda ayaa la yimaada awaitMarka matoorka JavaScript la kulmo const resultado = await algunaPromesa; shaqo gudaheed async, jooji fulinta hawshaas meeshaas oo ku soo noqda wareegga dhacdada si uu u sii wado ka qaybgalka hawlaha kale.

Dhanka kale, ballanku wuxuu sii wadaa hawshiisa si madaxbannaan. Marka ugu dambeyntii la xalliyo, matoorku wuxuu dib u bilaabayaa fulinta shaqada isla markiiba ka dib xariiqda await, ku meelaynta doorsoomaha qiimihii uu ballanku ku soo celiyayMarka loo eego qof akhrinaya koodka, waxay u egtahay wicitaan isku mid ah oo qaadanaya wax yar.

Waxa xiisaha lihi waa in tani hakad ku jirto Ma xannibo CPU-gaDufanka ugu weyn ee JavaScript wuxuu ka baaraandegi karaa dhacdooyinka isticmaalaha, animations, koodka kale ee asynchronous, iwm. Taasi waa sababta aan u niraahno taas await Way ka badan tahay a abstraction syntactic xarrago leh ku saabsan ballamihii hab cusub oo loo socodsiiyo hawlaha gadaal.

Haddii aad doorbidayso, waxaad qiyaasi kartaa in isku-dhafka const resultado = await promesa; es promesa.then(valor => { resultado = valor; ... }) wax u dhigma, laakiin loo qaybiyey hab toosan oo ka fogaanaya dib u soo yeedhida buul oo wanaajisay hufnaanta socodka.

Hal faahfaahin oo cajiib ah ayaa ah, haddii aad u guurto await shay aan ballan ahayn laakiin leh hab .then()Matoorku wuxuu isku dayi doonaa inuu ula dhaqmo sidii inuu yahay. Waxay u yeeri doontaa taas .then() oo leh laba hawlood oo gudaha ah xallinta iyo diidmada aad u la mid ah kuwa wax dhisaya Promise. In sidan, await Waxay la jaanqaadi kartaa fulinta ballanqaadyada nooca "dabadeed".

Cilad ku maaraynta async/sug: isku day/qabso oo la diiday balamo

Marka ballan waa diid inta aad isticmaalayso awaitSaamaynta tooska ah waa in ka reeban lagu tuuro xariiqdaas. Marka laga eego dhinaca koodhkaaga, waxaad mooddaa inaad wax qortay throw error; saxda ah meesha await, taas oo sababta in fulintaas uu u boodo block catch ugu dhow.

Tusaale ahaan, haddii aad isticmaasho const datos = await obtenerDatos(); iyo shaqada obtenerDatos Waxay soo celinaysaa ballan qalad ku dhammaada; socodka ayaa si toos ah u tagi doona block catch (error) adiga try..catchHaddii aadan haysan meel qabsasho ah oo ku wareegsan, ballanqaadka daahsoon ee ah in hawshu soo noqoto async Waa la diidi doonaa.

Tani waxay ka dhigan tahay, in kastoo laga yaabo inay weli jiraan ballanqaadyo gudaha ah, markaad la shaqeyso async / sug habka dabiiciga ah ee loo maareeyo khaladaadka waxay la jirtaa try..catchsida kood kasta oo JavaScript ah oo ka reeban. Midayntan qaababka waxay si weyn u fududaynaysaa caqliga waxayna yaraynaysaa baahida loo qabo in la xasuusto qaabab kala duwan iyadoo ku xidhan haddii koodku isku mid yahay ama isku mid yahay.

Haddii, si qalad ah, aad illowdo inaad ku darto a .catch() ballankii lagu soo celiyay hawl async Haddii ay ku guuldareysato, deegaanka ayaa soo bandhigi doona digniin. "ballan aan la maamulin" (diidmada ballanta ee aan la maaraynIntaa waxaa dheer, waxaad isticmaali kartaa dhacdada caalamiga ah ee browserka. unhandledrejection in la diiwaan geliyo maamule soo qabta dhammaan khaladaadkaas oo ka hortagaya in aan la dareemin.

Marka la isku daro await oo leh agabka sida Promise.all, hal qalad oo ka mid ah ballanqaadyada ayaa doona faafinaysaa ballankii wadajirka ahaa ugu dambeyntiina waxay keentaa ka reeban oo aad la qabsan karto try..catchSidan, maaraynta khaladaadka qulqulka shaqadu waxay ahaanaysaa mid joogto ah oo meel dhexe ah.

Async/ku sug soo-dejinta: Talaabo-tallaabo Wicisyada API

Mid ka mid ah isticmaalka ugu badan ee async/sugidda waa gelitaanka HTTP APIs oo isticmaalaya shaqada fetch()API-kani waxa uu soo celinayaa ballan lagu xalliyo shay Response, kaas oo aad markaas ugu yeeri karto habab ay ka mid yihiin .json() o .text()kuwaas oo balan qaadyo cusub sameeyay.

Bal qiyaas inaad rabto inaad soo koobto macquulnimada codsiga xogta laga soo bilaabo barta ugu dambeysa ee shaqada. Hadii aad cadeyso async function obtenerDatos(), gudahooda waad awoodaa sug jawaabta shabakada await fetch(...) ka dibna jidhka u beddelo JSON oo leh const datos = await respuesta.json(); iyada oo aan loo baahnayn silsilado dhowr ah .then().

Si loo hubiyo in seerfarku si sax ah uga jawaabay, waa wax caadi ah in la hubiyo guriga respuesta.okkaas oo tilmaamaya in koodka heerka HTTP uu ku jiro inta u dhaxaysa 200-299. Haddii kale, waxaad gacanta ku tuuri kartaa qalad throw new Error('Error en la red');, taasoo sababi doonta catch qabso xaalada.

Habbee socodka oo dhan gudaha a try { ... } catch (error) { ... } Tani waxay ka dhigaysaa shaqada asynchronous mid aad u adkeysi badan: dhibaato kasta, ha ahaato shabakad, falanqaynta JSON, ama macquul ah, waxay kicin doontaa xannibaadda qabsashada halka aad awoodid geli qaladka ama soo bandhig fariin ka badan isticmaale-saaxiibtinimo.

Ugu dambeyntii, si aad u isticmaasho shaqada, si fudud u wac sida kuwa kale: obtenerDatos();Xasuusnoow in, isagoo ah asynchronous, ay soo celiso ballan, markaa dibadda waa inaad doorataa inaad isticmaasho iyo in kale. await obtenerDatos() shaqo kale gudahood async ama la qabso .then().catch() haddii aad ku jirto xaalad aan isku mid ahayn.

Samee hawlgalo badan oo barbar socda Promise.all iyo async/sugid

Inta badan ma rabto inaad sugto hal codsi si aad u dhammayso ka hor inta aanad bilaabin kan ku xiga; bedelkeeda, waxaad xiisaynaysaa... hal mar billow hawlgallo badan oo is-raac ah oo sii wad marka ay dhammeeyaan. Taas awgeed, habka Promise.all() Waxay si fiican ugu habboon tahay.

Ka soo qaad inaad u baahan tahay inaad isticmaasho laba API oo kala duwan, tusaale ahaan /datos1 y /datos2, iyo hadhow ku mil xogta hal shayHalkii aad sugi lahayd in kan ugu horreeya uu dhammaystiro ka hor inta aanad bilaabin labaad, waxaad qori kartaa wax la mid ah const [r1, r2] = await Promise.all([fetch(url1), fetch(url2)]); waxaana labada codsi loo samayn doonaa is barbar.

Markaad labada jawaabaha hesho, waad codsan kartaa await mid kasta si loogu beddelo JSON: const d1 = await r1.json(); const d2 = await r2.json();Ugu dambeyntii, waa mid aad u badan isku dar xogta oo leh hawlwadeenka faafinta: const datosCombinados = { ...d1, ...d2 };, kaas oo abuura qaab-dhismeed gaar ah oo isku dhafan sifooyinka labadaba.

Balooggan oo dhan waa in lagu duuduubaa a try..catchsababtoo ah guuldarro kasta oo ku timaada mid ka mid ah codsiyada ayaa keeni doonta Promise.all() waa la diiday. Waad ku mahadsan tahay async/sugid, la tacaalida xaaladaha noocaan ah hawlgallada isku midka ah Waa mid fudud muuqaal ahaan laakiin aad u xoog badan marka la eego waxqabadka.

Habkani wuxuu si gaar ah faa'iido u leeyahay marka codsigaagu u baahan yahay dhowr kheyraad oo madaxbannaan ka hor inta aan aragtida la soo bandhigin: tusaale ahaan, helitaanka qaabeynta, xogta isticmaalaha iyo xisaabaadka isticmaalka isku mar, yaraynta guud ahaan wakhtiga sugitaanka.

Faa'iidooyinka dhabta ah ee async/sugid iyo balan qaadyada "saaxiibka ah" iyo dib u soo celinta

Isticmaalka async/wait waxay bixisaa faa'iidooyin wax ku ool ah oo dhowr ah Faa'iidooyinkan ayaa laga dareemi karaa tusaalooyinkii hore ilaa codsiyada baaxadda leh. Midda ugu cad waa akhriska: qulqulka waxaa laga qoraa kor ilaa hoos iyada oo aan loo baahnayn hawlo buul ah ama silsilado ah. .then() midba midka kale ka dib.

Qodob kale oo adag ayaa ah ilaalinta koodhkaIyada oo leh baloogyo toosan oo dheeraad ah, way fududahay in la soo bandhigo isbeddelada, laga soo saaro qaybo ka mid ah hawlaha caawinta, ama dib u isticmaalida macquulka ah. Tani waxay si toos ah u keentaa khaladaad yar iyo qalooca waxbarashada fudud ee dadka ku cusub mashruuca.

Khalad la tacaalida try..catch halkii la isku dhufsan lahaa .catch() kala firdhay Waxay ka caawisaa dhexdhexaadinta caqli-galnimada qaladka. Waxaad ku hareerayn kartaa dhowr await oo leh hal baloog oo hirgeli siyaasad maarayn khaladaad joogto ah, iyada oo aan la lumin faahfaahinta xariiqa dhibaatadu ka dhacday.

Marka laga eego dhinaca waxqabadka, async/sugid kama dhigayso kood si "dhakhso leh" keligiis, laakiin waxay kugu dhiirigelin kartaa inaad isticmaasho qaababka sida Promise.all() si aad u fuliso hawlo isbarbar socda oo laga yaabo in aad hore ugu socodsiisay si taxane ah. Natiijadu waa wakhtiga sugitaanka oo ka yar ee isticmaala dhamaadka.

Intaa waxaa dheer, async / sugitaanka waa waafaqsan balamaha dhaqankaUma baahnid inaad dib u qorto dhammaan koodka si aad u qaadato. Waxaad isku dari kartaa hawlaha isticmaala. .then() kuwa kale ee isticmaala await Dhib malaha, taas oo sahlaysa in si tartiib tartiib ah mashaariicda loo haajiro.

Nidaamka deegaanka casriga ah, labadaba browser-yada iyo gudaha Node.js, inta badan qalabka iyo maktabadaha ayaa mar horeba ku tiirsan ballanqaadyada iyo async/sugid. Tani waxay ka dhigaysaa barashada fikradahan si wanaagsan inaysan ahayn ikhtiyaari, laakiin lama huraan ah. Shuruudaha lagu shaqeynayo JavaScript casriga ah mashaariicda xirfadeed.

Fikirkan oo dhan—ballan qaadyada, async/sugid, fetch, Promise.allIsku dayga/qabsashada iyo qaamuuska ereyada muhiimka ah waxay sameeyaan qaab-dhismeed aad u adag oo qoraal ah kood cad, la akhriyi karo, oo adagHagaajinta iyaga waxay kuu ogolaaneysaa inaad dhisto codsiyada casriga ah ee shabakada kuwaas oo si degdeg ah uga jawaaba, si fiican uga faa'iidaysta shabakada, aadna u sahlan in la ilaaliyo waqti ka dib.