\uc5b8\uae09\ud560 \ud544\uc694\uc870\ucc28 \uc5c6\uc744 \uc815\ub3c4\ub85c \uac04\ub2e8\ud569\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uc2e4\uc81c \uad00\uc2ec\uc774 \uc9d1\uc911\ub418\ub294 fetch API \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\r\nfetch('lion.jpg')\r\n .then(function (response) {\r\n return response.blob();\r\n })\r\n .then(function (blob) {\r\n var objUrl = URL.createObjectURL(blob);\r\n myImage.src = objUrl;\r\n });\r\n<\/pre>\n\uba3c\uc800 1\ubc88 \ucf54\ub4dc\uc758 fetch \ud568\uc218\ub97c \ud1b5\ud574 \uc778\uc790\ub85c lion.jpg\ub77c\ub294 \uc0c1\ub300 \uacbd\ub85c\uc758 URL\uc744 \ud1b5\ud574 (\ub124\ud2b8\uc6cc\ud06c\uc5d0\uc11c) \uc774\ubbf8\uc9c0 \ub370\uc774\ud130\ub97c \uac00\uc838\uc640 2\ubc88 \ucf54\ub4dc\uc758 \uccab\ubc88\uc9f8 then\uc5d0 \uc9c0\uc815\ub41c \ud568\uc218\uc758 response\uc5d0 \uadf8 \uacb0\uacfc\ub97c \uc778\uc790\ub85c \ub2f4\uc544 \ud568\uc218\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4. \ud638\ucd9c\ub41c \ud568\uc218\uc5d0\uc11c \ubc18\ud658\ud558\ub294 \uacb0\uacfc\uc5d0 \ub300\ud574 5\ubc88 \ucf54\ub4dc\uc758 then\uc5d0 \uc9c0\uc815\ub41c \ub610 \ub2e4\ub978 \ud568\uc218\uc758 \uc778\uc790\uc5d0 \ub2f4\uc544 \ud638\ucd9c\ud558\uac8c \ub429\ub2c8\ub2e4. \ud558\ub098\uc758 fetch\ub294 \uc774\ucc98\ub7fc 2\uac1c\uc758 \uc5f0\uc18d\ub41c then\uc73c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4.<\/p>\n
API\uc758 \uc2e4\ud589\uc5d0 \uc788\uc5b4 \uc911\uc694\ud55c \uac83\uc740 \ud574\ub2f9 API\uc758 \uc2e4\ud328\uc5d0 \ub300\ud55c \ucc98\ub9ac\uc785\ub2c8\ub2e4. \ub9cc\uc57d lion.jpg\uc5d0 \ub300\ud55c URL\uc774 \uc62c\ubc14\ub974\uc9c0 \uc54a\uc744 \uacbd\uc6b0\uc5d0 \ub300\ud55c \ucc98\ub9ac\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \uc774\ub7ec\ud55c \uc608\uc678\uc5d0 \ub300\ud55c \uacbd\uc6b0\uc758 \ucf54\ub4dc\uae4c\uc9c0 \ub2f4\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nfetch('lion.jpg')\r\n .then(function (response) {\r\n if (response.ok) {\r\n return response.blob();\r\n } else {\r\n alert('\ub124\ud2b8\uc6cc\ud06c \uc624\ub958');\r\n }\r\n })\r\n .then(function (blob) {\r\n var objUrl = URL.createObjectURL(blob);\r\n myImage.src = objUrl;\r\n })\r\n .catch(function (err) {\r\n alert(err)\r\n });\r\n<\/pre>\n\uccab\ubc88\uc9f8 then\uc740 \ub124\ud2b8\uc6cc\ud06c \ud1b5\uc2e0 \ubc0f \uc778\uc790\ub85c \uc9c0\uc815\ud55c URL\uc5d0 \ub300\ud55c \ubb38\uc81c\uac00 \uc788\ub294\uc9c0\ub97c \uac80\uc0ac\ud574\uc57c \ud558\ub294\ub370, 3\ubc88 \ucc98\ub7fc response \uc778\uc790\uc758 ok \uc18d\uc131\uc744 \ud1b5\ud574 \ud655\uc778 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ub450\ubc88\uc9f8 then\uc740 \uccab\ubc88\uc9f8 then\uc774 \uc131\uacf5\ud588\ub358 \uc2e4\ud328\ud588\ub4e0\uc9c0\uac04\uc5d0 \ub450\ubc88\uc9f8 then\uc5d0\uc11c \uc9c0\uc815\ud55c \ud568\uc218\uc758 \uc2e4\ud589 \uc2dc\uc5d0 \uc5b4\ub5a4 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud558\uba74 13\ubc88 \ucf54\ub4dc\uc758 catch\uc758 \ud568\uc218\uac00 \ud638\ucd9c\ub429\ub2c8\ub2e4.<\/p>\n
\uc544\ub798\ub294 POST \ubc29\uc2dd\uc5d0 \ub300\ud55c fetch API \uc0ac\uc6a9\uc608\uc785\ub2c8\ub2e4.<\/p>\n
\r\nvar params = {\r\n '_id': 'test.getPlayersWhere2',\r\n 'age': 10,\r\n 'name': '%'\r\n};\r\n\r\nfetch('http:\/\/localhost:8080\/Bang?query',\r\n {\r\n method: 'POST',\r\n body: JSON.stringify(params)\r\n })\r\n .then(function (response) {\r\n if (response.ok) return response.text();\r\n })\r\n .then(function (text) {\r\n if (text) div.innerText = text;\r\n else alert('error');\r\n });\r\n<\/pre>\n\uc704\uc758 \uc0ac\uc6a9\uc608\uc5d0 \ub300\ud55c jQuery \ubc29\uc2dd\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nvar params = {\r\n '_id': 'test.getPlayersWhere2',\r\n 'age': 10,\r\n 'name': '%'\r\n};\r\n\r\n$.ajax({\r\n url: 'http:\/\/localhost:8080\/Bang?query',\r\n type: 'POST',\r\n data: JSON.stringify(params),\r\n dataType: \"text\",\r\n\r\n success: function (response) {\r\n div.innerText = response;\r\n },\r\n\r\n error: function (xhr, status) {\r\n alert('Error: ' + status);\r\n }\r\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"ES6\uc5d0\uc11c \uc9c0\uc6d0\ud558\ub294 fetch API\ub294 ES6\uc758 Promise\uc640 \ud568\uaed8 AJAX\ub97c Wrapping \ud574\uc8fc\ub294 \ub9e4\uc6b0 \uac00\ub3c5\uc131\uc774 \ub6f0\uc5b4\ub09c \ubc29\uc2dd\uc785\ub2c8\ub2e4. fetch API\uc740 \ub0b4\ubd80\uc801\uc73c\ub85c AJAX API\uc640 Promise\ub97c \uc0ac\uc6a9\ud558\uba74\uc11c \uc678\ubd80\ub85c \ub4e4\uc5b4\ub0b4\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc740 fetch API\uc5d0 \ub300\ud55c \ub9e4\uc6b0 \uae30\ucd08\uc801\uc774\uc9c0\ub9cc \uac00\uc7a5 \uc77c\ubc18\uc801\uc73c\ub85c \ub9ce\uc774 \uc0ac\uc6a9\ub418\ub294 \ub0b4\uc6a9\uc744 \uc815\ub9ac\ud569\ub2c8\ub2e4. \uba3c\uc800 \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \uc774\ubbf8\uc9c0\ub97c fetch API\ub97c \ud1b5\ud574 \uac00\uc838\uc640 \ud45c\uc2dc\ud558\ub294 \ucf54\ub4dc \uc911 \uba3c\uc800 DOM \uc694\uc18c\uc5d0 \ub300\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uc5b8\uae09\ud560 \ud544\uc694\uc870\ucc28 … <\/p>\n