Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
âasync/awaitâ ã¨å¼ã°ãããããå¿«é©ã« promise ãå©ç¨ããç¹å¥ãªæ§æãããã¾ããé©ãã»ã©ç°¡åã«ç解ãã使ç¨ãããã¨ãã§ãã¾ãã Async é¢æ°async ãã¼ã¯ã¼ãããå§ãã¾ãããã次ã®ããã«é¢æ°ã®åã«ç½®ããã¨ãã§ãã¾ã:
ãã®è¨äºã¯ Node.js ã¢ããã³ãã«ã¬ã³ãã¼ 2018 ã® 1 æ¥ç®ã§ãã Node.js ã®æ大ã®ç¹å¾´ã¨ãè¨ãã Promise ã§ãããæè¿ã§ã¯ async/await ã«ããããããããæ¸ããããã«ãªã£ã¦ãã¾ããã ãããå®å ¨ã«åæå¦çã¨ããæè¦ã§æ¸ãã¦ãã¾ãã¨ããã£ã¦ãã¾ãã®ãç´åå®è¡ã並åå®è¡ã¾ããã ã¨æãã¾ãã è¤æ°ã® async function ã®æ±ã ãã¨ãã°ã以ä¸ã®ã³ã¼ããè¦ã¦ã¿ã¾ãããã const users = [ { name: 'kirito', weapon: 'elucidator' }, { name: 'sinon', weapon: 'hecate' } ] users.forEach(async user => await saveUser(user)) const users = await fetchUsers() // [] async
ES6å½¢å¼ã®Promiseã使ãã¨ãã«é »åºãã3ã¤ã®ãã¿ã¼ã³ãç´åãã¿ã¼ã³ã並åãã¿ã¼ã³ãåå²ãã¿ã¼ã³ã説æãã¾ãã æè¿ãPromiseå¨ããçãä¸ãã£ã¦ãã¦ãreduceã使ã£ãã»ããè¯ãã¨ããã©ã¤ãã©ãªãã©ãã¨ãã»ã»ã»ãã話ãèãã®ã§ãããããããããã¿ã«æ¸ããã¨ãã«ã©ãããã®ãåºæ¬ãªã®ããã¨ããæ å ±ãè¦ã¤ãããªãã®ã§æ¸ãã¦ã¿ã¾ããã ç´åãã¿ã¼ã³ ä¸çªè¯ã使ãã®ã¯ãè¤æ°ã®å¦çãç´åã«ã¤ãªãããã¿ã¼ã³ã§ãããã#1ãçµãã£ã¦ããã#2ã#2ãçµãã£ã¦ãã#3ã¨ãããã¿ã¼ã³ã§ãã Promise.resolve() .then(function(){ return new Promise(function(fulfilled, rejected){ asyncFunc(function(){ fulfilled(); }); }) }) .then(function(){ return
ã¯ããã« ä»æ´ã§ãããJavaScriptã®async/awaitã«é¢ããåå¿é²ã«ãªãã¾ãã ãä»ã¾ã§$.Deferred()ãPromiseãªã©ã§éåæå¦çã¯æ¸ãããã¨ãããããasync/awaitã¯ããããªãã ã$.Deferred()ãPromiseãªã©ã®éåæå¦çã®æ¸ãæ¹ããããã£ã¨ç°¡æ½ã«æ¸ããæ¸ãæ¹ãããã°ç¥ãããã ãä»ã¾ã§ã®éåæå¦çã®æ¸ãæ¹ã¨æ¯ã¹ã¦ä½ãè¯ãã®ãããããªãã ã¨ãã£ã人éåãã®è¨äºã§ãã $.Deferred()ãPromiseãªã©ã§éåæå¦çãæ¸ãããã¨ãããåæã®ãããéåæå¦çèªä½ã«é¢ãã説æã¯è¨è¼ãã¦ããã¾ããã è¨è¼ãã¦ããå©ç¨ä¾ã®ã³ã¼ãã¯Chromeï¼ææ°ï¼ã®ã³ã³ã½ã¼ã«ä¸ã§åãã¾ãã®ã§ãã³ã³ã½ã¼ã«ä¸ã§å®è¡ãã¦åä½ã確èªãã¦ã¿ãã¨ç解ãæ·±ã¾ããããã¨æãã¾ãã æ¬è¨äºã§ç¨ãã¦ããç¨èª Promiseãè¿ã Promiseãªãã¸ã§ã¯ããè¿ããã¨ã
Promise ãªãã¸ã§ã¯ãã¯ãéåæå¦çã®å®äºï¼ãããã¯å¤±æï¼ã®çµæããã³ãã®çµæã®å¤ã表ãã¾ãã ãããã¹ã®æåã¨ä½¿ç¨æ³ã«ã¤ãã¦å¦ã¶ã«ã¯ãæåã«ãããã¹ã®ä½¿ç¨ããèªã¿ãã ããã ãããã¹ (Promise) ã¯ãä½æãããæç¹ã§ã¯åãããªãã¦ãããå¤ã¸ã®ãããã·ã¼ã§ããéåæã®ã¢ã¯ã·ã§ã³ã®æåå¤ã¾ãã¯å¤±æçç±ã«ãã³ãã©ã¼ãçµã³ã¤ãããã¨ãã§ãã¾ããããã«ãããéåæã¡ã½ããã¯çµæã®å¤ãè¿ã代ããã«ãæªæ¥ã®ããæç¹ã§å¤ãæä¾ãããããã¹ãè¿ããã¨ã§ãåæã¡ã½ããã¨åãããã«å¤ãè¿ããã¨ãã§ããããã«ãªãã¾ãã Promise ã®ç¶æ ã¯ä»¥ä¸ã®ããããã¨ãªãã¾ãã å¾ æ© (pending): åæç¶æ ãæåã失æããã¦ãã¾ããã å±¥è¡ (fulfilled): å¦çãæåãã¦å®äºãããã¨ãæå³ãã¾ãã æå¦ (rejected): å¦çã失æãããã¨ãæå³ãã¾ãã å¾ æ©ç¶æ ã®ãããã¹ã® æçµ
æè¿åå¼·ä¸ã®Promiseã§ãããç¾æ®µé(15/06/03)ã§ã¯IE11ã«å¯¾å¿ãã¦ãã¾ããã PromiseãIEã«å¯¾å¿ãããããã«ã¯ães6-promiseã¨ããNode.jsã®ã©ã¤ãã©ãªãããã³ãã¨ã³ãã§èªã¿è¾¼ãå¿ è¦ãããã¾ãã ãããNode.jsã®ã©ã¤ãã©ãªã¯ããã®ã¾ã¾ã§ã¯ããã³ãã¨ã³ãã§ä½¿ããªãã®ã§ã webpackã§ããã³ãã¨ã³ãåãã«Buildããå¿ è¦ãããã¾ãã -webpackã¯ä»ã«ãå¤ãã®æ©è½ãããã¾ãããããã§ã¯Node.jsã®ã¢ã¸ã¥ã¼ã«ãããã³ãã¨ã³ãã§ä½¿ãããæ¹æ³ã®ã¿ã«ãã©ã¼ã«ã¹ãã¾ãã- webpackã使ãããã®æºå ã¾ãã¯æ¬ä½ã®ã¤ã³ã¹ãã¼ã«ã $ npm install webpack -g 次ã«é©å½ãªãã£ã¬ã¯ããªãä½æãã¾ãã $ mkdir webpack-sample && cd webpack-sample ä»å使ãã©ã¤ãã©ãª(es6-promise
æ¦è¦ åèè ã®è¨±è«¾ãå¾ã¦ç¿»è¨³ã»å ¬éãããã¾ãã è±èªè¨äº: JavaScript: Learn Promises - JavaScript Promises made easy. Learn the basics in 5 minutes. åæå ¬éæ¥: 2017/10/31 èè : Brandon Morelli ãµã¤ã: https://codeburst.io/ æ´æ°æ å ±: 2017/11/16: åçå ¬é 2021/03/05: æ´æ° JavaScriptã®Promiseããããããã解説ãã¾ãããPromiseã®åºæ¬ã5åã§å¦ã³ã¾ãããã ãã®è¨äºã§å¦ã¹ãã㨠æ¬ãã¥ã¼ããªã¢ã«ã§ã¯ãJavaScriptã®ãPromiseãã®åºç¤ãå¦ã³ã¾ããPromiseã®ãã¹ã¦ãç¶²ç¾ çã«èª¬æãããã®ã§ã¯ããã¾ããããPromiseãç解ãã¦ã³ã¼ãã§ä½¿ãå§ããã®ã«å¿ è¦ãªç¥èãåºãããã¨ãã§ãã¾ãã
ä»åã¯ãJavaScriptã§éåæå¦çãç°¡æ½ã«è¨è¿°ã§ããPromiseã«ã¤ãã¦å¦ç¿ããã¦ããã¾ãããï¼ ãåæå¦çã»éåæå¦çã£ã¦ä½ï¼ã ãPromiseã£ã¦ã©ããã£ã¦ä½¿ãã®ãåãããªãã ãPromiseã®æ´»ç¨æ¹æ³ãã¨ã©ã¼ãã³ããªã³ã°ãç¥ãããã ãã®ãããªå 容ãå«ãã¦ãæ¬è¨äºã§ã¯ä»¥ä¸ã®ãããªæ§æã§è§£èª¬ãã¦ããã¾ãï¼ ãPromiseãã¨ã¯ï¼ ã¾ãæåã«ãPromiseããç解ããããã®åºæ¬çãªç¥èããå¦ç¿ãã¦ããã¾ãããã éè¦ãªæ¦å¿µã§ãããåæå¦çã»éåæå¦çãã®ç解ã¨ããã³ã¼ã«ããã¯ãã«ã¤ãã¦å¦ã³ã¾ãã ãåæå¦çãã¨ãéåæå¦çãã«ã¤ã㦠ãpromiseããç解ããã«ã¯ã大åæã¨ãã¦ãåæå¦çããéåæå¦çãã®ç解ãå¿ è¦ã§ãã®ã§ãããããã¦ããã¾ãã åæå¦çã¯ãããã°ã©ã ãä¸ããä¸ã¸é çªã«1ã¤ãã¤å¦çããã¦ãããã¨ãæå³ãã¾ãã åæå¦ç â åæå¦ç â åæå¦ç ããã
1. Promiseã¨ã¯ï¼ Promiseã¨ã¯ãã®åã®éãç´æã®ãã¨ã§ãã Promiseã使ãå ´åã¯ä½ãã®å¦çãæ½ãã¦ããã®çµæãæ»ã£ã¦ãããã¨ãç´æããã¦ãã¾ãã çµæã¯æå(Resolve)ãããã¯å¤±æ(Reject)ã®ã©ã¡ããã®æ¹æ³ã§å¸°ã£ã¦æ¥ã¾ãã const iceCreams = ["strawberry", "chocolate", "vanilla"]; const iceCreamType = "lemon"; getIceCream = (iceCreamType) => { return new Promise((resolve, reject) => { if(iceCreams.indexOf(iceCreamType) > -1){ resolve(iceCreamType); } else { reject("There is no ice cream");
ã³ã¼ã«ããã¯å°çã解æ¶ããPromiseãã¿ã¼ã³ Promiseã¯éåæå¦çã®ãã¶ã¤ã³ãã¿ã¼ã³ã®ä¸ã¤ã§ããéåæå¦çé¢æ°ã®æ»ãå¤ã¨ãã¦ãå¦çã®éä¸ããæå³ãããªãã¸ã§ã¯ããè¿ãäºã§ããããã¨ããã«æãå±ãããã«ãã¾ããã¡ãªã¿ã«è¨èªã«ãã£ã¦ã¯Futureã¨å¼ã°ãããã¨ãããã¾ããï¼åè: future - Wikipediaï¼ è¨èªã«ãã£ã¦ä½ãå©ç¹ã«ãªããã¯å¾®å¦ã«ç°ãªãã¾ãããJavaScriptã§ã¯ã³ã¼ã«ããã¯å°çãææ¢ã§ããäºã大ããã§ãããã JavaScriptã§ããè¦ãããéåæå¦çã¯ãå¦ççµæãã³ã¼ã«ããã¯é¢æ°ã§åãããã¿ã¼ã³ã§ãããæ¨æºAPIã§ãé »ç¹ã«ç¨ãããã¦ãã¾ãã
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}