{"id":10241,"date":"2020-08-30T12:40:09","date_gmt":"2020-08-30T03:40:09","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=10241"},"modified":"2020-08-31T08:48:04","modified_gmt":"2020-08-30T23:48:04","slug":"javascript%ec%9d%98-promise-api-%ec%9a%94%ec%95%bd","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=10241","title":{"rendered":"Javascript\uc758 Promise API \uc694\uc57d"},"content":{"rendered":"

Promise\ub294 \ucf54\ub4dc\uc758 \uc2e4\ud589 \ud750\ub984\uc5d0\uc11c \ube44\ub3d9\uae30\ucc98\ub9ac\ub97c \uc720\uc5f0\ud558\uac8c \ucc98\ub9ac\ud558\uae30 \uc704\ud55c API\uc785\ub2c8\ub2e4. \ucf54\ub4dc\ub97c \ud1b5\ud574 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

\r\nfunction test(callback) {\r\n    setTimeout(() => {\r\n        callback();\r\n    }, 2000);\r\n}\r\n\r\nfunction callback() {\r\n    console.log('Hello!')\r\n}\r\n\r\ntest(callback);\r\n<\/pre>\n
\uc704\uc758 \ucf54\ub4dc\ub294 2\ucd08 \ub4a4\uc5d0 \ucf58\uc194\uc5d0 Hello!\ub97c \ucd9c\ub825\ud569\ub2c8\ub2e4. \uc774 \ucf54\ub4dc\ub97c Promise API\ub85c \ub300\uccb4\ud558\uba74 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nfunction test() {\r\n    return new Promise((resolve, reject) => {\r\n        setTimeout(() => {\r\n            resolve(); \r\n        }, 2000);\r\n    })\r\n}\r\n\r\nfunction callback() {\r\n    console.log('Hello!');\r\n}\r\n\r\ntest().then(callback);\r\n<\/pre>\n
\uc880\ub354 \uc644\uc804\ud55c Promise API\ub97c \uc704\ud55c \uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c \ud655\uc7a5\ub41c \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uba74 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nfunction test() {\r\n    return new Promise((resolve, reject) => {\r\n        setTimeout(() => {\r\n            let bOK = true;\r\n\r\n            console.log('1');            \r\n            if(bOK) {\r\n                resolve(1); \/\/ [Fulfilled State] 1, 2\ub97c \ucf58\uc194\uc5d0 \ucd9c\ub825\ud558\uace0 \uc801\ub2f9\ud55c \uc2dc\uc810\uc5d0 then\uc73c\ub85c \ub118\uaca8\uc900 \ud568\uc218\ub97c \ud638\ucd9c\ud574 \uc90c           \r\n            } else {\r\n                reject(-1); \/\/ [Rejected State] 1, 2\ub97c \ucf58\uc194\uc5d0 \ucd9c\ub825\ud558\uace0 \uc801\ub2f9\ud55c \uc2dc\uc810\uc5d0 \uc608\uc678\ub97c \ubc1c\uc0dd\uc2dc\ud0b4\r\n            }\r\n            console.log('2'); \r\n        }, 2000);\r\n    })\r\n}\r\n\r\nfunction callback(result) {\r\n    console.log('Hello! : ' + result)\r\n}\r\n\r\nlet p = test(); \/\/ [Pending State]\r\np.then(callback); \/\/ Promise\uc758 resolve \ud638\ucd9c\uc5d0 \uc758\ud574 callback\uc774 \ud638\ucd9c\ub428\r\n<\/pre>\n
Promise\ub294 3\uac00\uc9c0 \uc0c1\ud0dc\ub97c \uac16\ub294\ub2e4\uace0 \ud569\ub2c8\ub2e4. Promise \uac1d\uccb4\uac00 \uc0dd\uc131\ub418\uc5b4 \uc0ac\uc6a9\ub420 \uc900\ube44\uac00 \ub41c Pending, \ube44\ub3d9\uae30 \ucc98\ub9ac\uc5d0 \uc758\ud574 \uc6d0\ud558\ub294 \uc62c\ubc14\ub978 \uacb0\uacfc\ub97c \uc5bb\uc5b4\uc640 \uadf8 \uacb0\uacfc\ub97c \uc815\uc0c1\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\uace0\uc790 resolve\uac00 \ud638\ucd9c\ub41c Fulfilled \uc0c1\ud0dc, \ubb34\uc5b8\uac00 \uc798\ubabb\ub418\uc5b4 \uc608\uc678\ub85c \ucc98\ub9ac\ud558\uace0\uc790 reject\uac00 \ud638\ucd9c\ub41c Rejected \uc0c1\ud0dc\uc785\ub2c8\ub2e4. \uc704\uc758 \uc9e7\uc740 \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uba74, \uc5b4\ub5a4 \uc774 3\uac00\uc9c0 \uc0c1\ud0dc\uc5d0 \ub300\ud55c \uc2dc\uc810\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. resolve\uc640 reject\ub294 \uac01\uac01 \uc131\uacf5\uacfc \uc2e4\ud328\uc5d0 \ub300\ud55c \uacb0\uacfc\uac12\uc744 \uc5bb\uc744 \uc218 \uc788\ub294 \uac1d\uccb4\ub97c \uc804\ub2ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c\ub294 \uac01\uac01 1\uc640 -1\uc744 \ub118\uaca8\uc8fc\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc8fc\ubaa9\ud560 \uc810\uc740 resolve\uc640 reject\ub294 \ub3d9\uc2dc\uc5d0 \uac19\uc774 \uc2e4\ud589\ub420 \uc218 \uc5c6\uc73c\uba70 \ubc30\ud0c0\uc131\uc744 \uac16\uc2b5\ub2c8\ub2e4. \uc989, resolve\uac00 \ud638\ucd9c\ub418\uba74 reject \ucf54\ub4dc\uac00 \ud638\ucd9c\ub41c\ub2e4\uace0 \ud574\ub3c4 \uc2e4\ud589\ub418\uc9c0 \uc54a\uc73c\uba70, reject \ucf54\ub4dc\uac00 \ud638\ucd9c\ub418\uba74 resolve\uac00 \ud638\ucd9c\ub418\uc5b4\ub3c4 reject\uac00 \ud638\ucd9c\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \ub610 \ud558\ub098\ub294 resolve\uc5d0 \uc758\ud574 \uc2e4\ud589\ub418\ub294 callback\uc740 resolve\uac00 \ud638\ucd9c\ub420\ub54c \uc989\uc2dc \uc2e4\ud589\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc704\uc758 \ucf54\ub4dc\uc758 \uc8fc\uc11d\uc744 \ubcf4\uba74 console.log(‘1’)\uacfc consloe.log(‘2’)\uc758 \uc704\uce58 \uc0ac\uc774\uc5d0 \uac01\uac01 resolve\uc640 reject\uac00 \uc788\ub294\ub370.. \uc2e4\ud589\uc21c\uc11c\ub294 console.log(‘1’)\uacfc console.log(‘2)\uac00 \uba3c\uc800 \uc2e4\ud589\ub418\uace0 resolve \ub610\ub294 reject\uc5d0 \uc5f0\uacb0\ub41c \ud568\uc218\uac00 \ud638\ucd9c\ub41c\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4. \uc774 \uae00\uc758 \ub9c8\uc9c0\ub9c9\uc73c\ub85c.. reject\uac00 \ud638\ucd9c\ub418\uba74 \uc608\uc678\ub97c \ub358\uc9c0\uac8c \ub429\ub2c8\ub2e4. \uc704\uc758 \ucf54\ub4dc\ub294 \uc801\ub2f9\ud55c \uc608\uc678\uc5d0 \ub300\ud55c \ucc98\ub9ac\ub97c \ud558\uace0 \uc788\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc774 \uc608\uc678 \ucc98\ub9ac\uae4c\uc9c0 \ud3ec\ud568\ub41c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nfunction test() {\r\n    return new Promise((resolve, reject) => {\r\n        setTimeout(() => {\r\n            let bOK = false;\r\n\r\n            if(bOK) {\r\n                resolve(1);           \r\n            } else {\r\n                reject(-1); \/\/ Promise\uc758 catch\ub85c \ub118\uaca8\uc900 \ud568\uc218\ub97c \ud638\ucd9c\ud574 \uc90c\r\n            }\r\n        }, 2000);\r\n    })\r\n}\r\n\r\nfunction callback(result) {\r\n    console.log('Hello! : ' + result)\r\n}\r\n\r\nfunction callbackError(result) {\r\n    console.log('Oh my god! : ' + result)\r\n}\r\n\r\ntest().then(callback, callbackError).catch(callbackError); \/\/ then\uacfc catch\ub294 Promise \uac1d\uccb4\ub97c \ubc18\ud658\ud574\uc90c\r\n\/\/ test().then(callback, callbackError); \/\/ \ubc14\ub85c \uc704\uc758 \ucf54\ub4dc\uc640 \ub3d9\uc77c\ud568\r\n<\/pre>\n
reject \ud568\uc218\uc758 \ud638\ucd9c\ub85c \uc778\ud574 Promise \uac1d\uccb4\uc758 catch\ub85c \ub118\uaca8\uc900 \ud568\uc218\ub97c \ud638\ucd9c\ud560 \uc218 \uc788\uac8c \ub418\uc5b4 \uc801\uc808\ud55c \uc608\uc678 \ucc98\ub9ac\uac00 \uac00\ub2a5\ud574 \uc9d1\ub2c8\ub2e4.<\/p>\n
Promise\ub294 \uc0ac\uc2e4 \uae30\ubc18 API\uc785\ub2c8\ub2e4. \uc989, Promise\ub97c \uae30\ubc18\uc73c\ub85c \uc0c1\ub300\uc801\uc73c\ub85c \uc0c1\uc704 \ub808\ubca8\uc758 API\ub97c \ud1b5\ud574 Promise\ub97c \uc0ac\uc6a9\ud558\uac8c \ub418\ub294\ub370\uc694. async\/await\ub098 fetch\uac00 \ubc14\ub85c \uadf8\uac83\uc778\ub370\uc694, fetch\ub294 \uc544\ub798\uc758 \uae00\uc744 \ucc38\uace0\ud558\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n
ES6\uc758 Fetch API<\/a><\/p><\/blockquote>\n