JavaScript Promises

1. JAVASCRIPT PROMISES in ECMAScript6 (Harmony)

2. 01 02 03 04 Promise란 무엇인가? Promise 사용하기 Promise의 특징 Promise 직접 구현하기 전통적인 콜백 패 턴이 가지고 있는 문제와 Promise 정 의및 사용 방법에 대해서 개괄적으로 살펴본다. Promise의 정적 메 서드와 인스턴스 메 서 드 , 그 리 고 thenable에 관한 개념 등 조금 더 다 양하고 자세한 내 용을 살펴본다. Promise에 대해 잘 알려져 있지 않 는 중요한 특징 몇 가지를 소개한다. ES6

3. Promises의

5. 베 이 스 가

6. 되 는

8. Promise/A+의

9. 사

10. 양을

11. 직접

12. 구현해

13. 봄 으 로 써

15. Promise에

16. 대한

18. 이해를

19. 더욱

20. 높인

21. 다.

23. 전통적인 콜백 패턴의 문제 1 여러운 비동기 예외 처리 3 try{  setTimeout(function(){  throw new Error('에러가 발생했다.');  }, 1000);  }catch(err){  console.error(err);  console.log('에러를 복구했다.');  }

24. 전통적인 콜백 패턴의 문제 1 여러운 비동기 예외 처리 try{  setTimeout(function(){  throw new Error('에러가 발생했다.');  }, 1000);  }catch(err){  console.error(err);  console.log('에러를 복구했다.');  } global 4

25. 전통적인 콜백 패턴의 문제 1 여러운 비동기 예외 처리 try{  setTimeout(function(){  throw new Error('에러가 발생했다.');  }, 1000);  }catch(err){  console.error(err);  console.log('에러를 복구했다.');  } global setTimeout() handler 호출 콜백 등록 5

26. 전통적인 콜백 패턴의 문제 1 여러운 비동기 예외 처리 try{  setTimeout(function(){  throw new Error('에러가 발생했다.');  }, 1000);  }catch(err){  console.error(err);  console.log('에러를 복구했다.');  } global time eventsetTimeout() handler 호출 콜백 등록 발화 6

27. 전통적인 콜백 패턴의 문제 1 여러운 비동기 예외 처리 try{  setTimeout(function(){  throw new Error('에러가 발생했다.');  }, 1000);  }catch(err){  console.error(err);  console.log('에러를 복구했다.');  } global time eventsetTimeout() handler 호출 콜백 등록 발화 예외 7

28. 전통적인 콜백 패턴의 문제 1 여러운 비동기 예외 처리 try{  setTimeout(function(){  throw new Error('에러가 발생했다.');  }, 1000);  }catch(err){  console.error(err);  console.log('에러를 복구했다.');  } global time eventsetTimeout() handler 호출 콜백 등록 발화 예외 통지예외 8

29. 전통적인 콜백 패턴의 문제 2 복수의 비동기 처리 fs.readdir(source, function(err, files){  if(err){  console.log('Error finding files : ' + err);  }else{  file.forEach(function(filename, fileIndex){  console.log(filename);  gm(source + filename).size(function(err, vlaues){  if(err){  console.log('Error identifying file size : ' + err);  }else{  console.log(filename + ' : ' + values);  aspect = (values.width / value.height);  widths.forEach(function(width, wwidthIndex){  height = Math.round(width /aspect);  console.log('resizing ' + filename + 'to ' + height + 'x' + height);  this.resize(width, height).write( destination + 'w' + width + '_' + filename, function(err){  if(err){  console.log('Error writing file : ' + err);  }  } );  });  }  });  });  }  }) 9

30. Promise란? 정의 Promise란 비동기 처리 로직을 추상화한 객체와 그것을 조작하는 방식을 말한다. E 언어에서 처음 고안됐으며 병렬 및 병행 프로그래밍을 위한 일종의 디자인이다. 비동기

31. 로직

32. 전달 Promise 인 터 페 이 스

33. 의존 구현 액터 10

34. Promise란? 효과 전통적인 콜백 패턴이 가진 단점을 일부 보완한다. 비동기 처리 시점을 명확하게 표현한다. Promise 객체의 인터페이스를 이용해 다양한 비동기 처리를 패턴화할 수 있다. 복잡하고 불편한 비동기 예외 처리를 손쉽게 다룰 수 있다. 11

35. Promise란? 명세 초기 작업 ES6 DRAFT Promises/A+ https://github.com/domenic/promises-unwrapping https://people.mozilla.org/~jorendorff/es6-draft.html#sec-promise-constructor Promises/A+

37. https://promisesaplus.com/

38. 12

39. Promise란? 사용된 곳 if('serviceWorker' in navigator){  navigator.serviceWorker.register('/sw=text/sw.js', {  scope: '/'  }).then(function(sw){  // registration worked  console.log('Registration succeeded.');  }).catch(function(err){  // registration filed  console.log('Registration filed with ' + err);  })  } function writeArrayToStream(array, writableStream){  array.forEach(chunk = writableStream.write(chunk));  return writableStream.close();  }    writeArrayToStream([1, 2, 3, 4, 5], writableStream)  .then(() = console.log('All done!'))  .catch(e = console.log('Error with the stream : ' + e)); Service Worker API Streams API 13

40. Promise 살펴보기 Promises API developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise strawman(폐기)

42. http://wiki.ecmascript.org/doku.php?id=strawman:promises

43. Constructor var promise = new Promise(function(resolve, reject){  // 비동기 처리 작성 // 처리가 끝나면 resolve 또는 reject 호출 }); Instace Method Static Method Promise.prototype.then(onFulfilled,

44. onRejected)

45. Promise.prototype.catch(onRejected)

46. Promise.all()

47. Promise.race()

48. Promise.resolve()

49. Promise.reject()

50. 14

51. Promise 살펴보기 워크플로우 /**  * @returns {Promise}  */  function asyncFunction(){  return new Promise(function(resolve, reject){  setTimeout(function(){  resolve('Async Hello world!!');  }, 16);  })  } asyncFunction().then(function(value){  console.log(value);  }).catch(function(error){  console.log(error);  }); asyncFunction().then(function(value){  console.log(value);  }, function(error){  console.log(error);  }); asyncFunction()은 Promise의 인스턴스를 반환할 뿐이며 비동기 로직은 모두 Promise에 추상화된다. 비동기 처리가 성공했을 때 호출될 콜백은 then(), 실패했을 때 호출될 콜백은 catch()로 등록한다. catch()는 then()을 이용해 대체할 수도 있다. 15

52. Promise 살펴보기 상태 초기 상태 성공(또는 해결) 상태 실패(또는 거부) 상태 불편 상태 unresolved

53. 또는

54. Pending,

56. 성공도

57. 실패도

58. 아닌

59. 초기

60. 상태

61. has-resolution

62. 또는

63. Fulfilled,

65. 성공(resolve)했을

66. 때의

67. 상태

68. has-rejection

69. 또는

70. Rejected,

72. 실패(reject)했을

73. 때의

74. 상태

75. Settled,

76. 성공

77. 또는

78. 실패

79. 했을

80. 때의

81. 상태.

82. Fulﬁlled Rejected Pending 16

83. Promise 맛보기 객체 생성 1.  new Promise(fn)으로 promise 객체를 생성한다. 2.  fn에는 비동기 처리를 작성한다. •  처리 결과가 정상이라면 resolve(결과 값)을 호출한다. •  처리 결과가 비정상이라면 reject(error)을 호출한다. function getJSON(URL){  return new Promise(function(resolve, reject){  var req = new XMLHttpRequest();    req.open('GET', URL, true);  req.onload = function(){  if(req.status === 200){  resolve(JSON.parse(req.responseText));  }else{  reject(new Error(req.statusText));  }  };    req.onerror = function(){  reject(new Error(req.statusText));  };    req.send();  })  } function doSomething(callback){  var value = 42;    if(value === 42){  callback(null, value);  }else{  callback(new Error('에러'), null);  }  } 17

84. Promise 맛보기 객체 사용 Promise의

85. 인스턴스

86. 메서드를

87. 이용해

88. 객체의

89. 상태가

91. 변화할

92. 때

93. 한

94. 번만

95. 호출될

96. 함수를

97. 등록한다.

98. Pending 18

100. 인스턴스

101. 메서드를

102. 이용해

103. 객체의

104. 상태가

106. 변화할

107. 때

108. 한

109. 번만

110. 호출될

111. 함수를

112. 등록한다.

113. resolve()가

114. 호출

115. 됐을때,

116. 객체

117. 상태가

118. Fulfilled

119. 됐음을

120. 뜻하며

121. onFulfilled가

122. 호출된다. onFulﬁlled resolve() value Pending 19

124. 인스턴스

125. 메서드를

126. 이용해

127. 객체의

128. 상태가

130. 변화할

131. 때

132. 한

133. 번만

134. 호출될

135. 함수를

136. 등록한다.

137. resolve()가

138. 호출

139. 됐을때,

140. 객체

141. 상태가

142. Fulfilled

143. 됐음을

144. 뜻하며

145. onFulfilled가

146. 호출된다. reject()가

147. 호출

148. 됐을때,

149. 객체

150. 상태가

151. Rejected

152. 됐음을

153. 뜻하며

154. onRejected가

155. 호출된다. onRejected reject() error Pending 20

157. 인스턴스

158. 메서드를

159. 이용해

160. 객체의

161. 상태가

163. 변화할

164. 때

165. 한

166. 번만

167. 호출될

168. 함수를

169. 등록한다.

170. resolve()가

171. 호출

172. 됐을때,

173. 객체

174. 상태가

175. Fulfilled

176. 됐음을

177. 뜻하며

178. onFulfilled가

179. 호출된다. reject()가

180. 호출

181. 됐을때,

182. 객체

183. 상태가

184. Rejected

185. 됐음을

186. 뜻하며

187. onRejected가

188. 호출된다. onRejected reject() error onFulﬁlled resolve() value getJSON('/api/stores').then(function(value){  console.log(value);  }).catch(function(error){  console.log(error.message);  }); getJSON(’/api/stores').then(function(value){  console.log(value);  }, function(error){  console.log(error.message);  }); Pending 21

189. PROMISES 사용하기

190. Promise.resolve new Promise() 단축 표기 Promise.resolve()를

191. 사용하면

192. new

193. Promise()

194. 구문을

195. 단축해

196. 표기할

197. 수

198. 있다.

199. 23

200. Promise.resolve new Promise() 단축 표기 Promise.resolve()를

201. 사용하면

202. new

203. Promise()

204. 구문을

205. 단축해

206. 표기할

207. 수

208. 있다.

209. var promise = new Promise(function(resolve){  resolve(42);  }).then(function(value){  console.log(value);   }); var promise = Promise.resolve(42).then(function(value){  console.log(value);  }); 24

210. Promise.resolve thenable과 resolve then()을

211. 가진

212. 유사

213. promise

214. 객체를

215. thenable한

216. 객체라고

217. 한다.

218. Promise.resolve()는

219. thenable

220. 객체를

221. promise

222. 객체로

223. 변환할

224. 수

225. 있다.

226. (이

227. 기능은

228. 과거

229. Promise.cast()라는

230. 별도의

231. 메서드로

232. 존재했었다.)

233. 25

234. Promise.resolve thenable과 resolve then()을

235. 가진

236. 유사

237. promise

238. 객체를

239. thenable한

240. 객체라고

241. 한다.

242. Promise.resolve()는

243. thenable

244. 객체를

245. promise

246. 객체로

247. 변환하는

248. 기능이

249. 있다.

250. (이

251. 기능은

252. 과거

253. Promise.cast()라는

254. 별도의

255. 메서드로

256. 존재했었다.)

257. 26 var promise = Promise.resolve($.ajax('/api/comments'));    promise.then(function(value){  console.log(value);  }).catch(function(error){  console.log(error.statusText);  }); 노트

258. :

259. jQuery.ajax()가

260. 반환하는

261. jqXHR

262. 객체는

263. Deferred

264. Object를

265. 상속한다.

276. 하지만

277. Deferred는

278. Promise/A+나

279. ES6

280. Promise

281. 사양을

282. 따른

283. 것이

284. 아니므로

296. 특정

297. 처리시

298. 문제가

299. 발생할

300. 수

301. 있다.

303. Promise.reject new Promise() 단축 표기 Promise.reject()를

304. 사용하면

305. new

306. Promise()

307. 구문을

308. 단축해

309. 표기할

310. 수

311. 있다.

312. 27 var promise = new Promise(function(resolve, reject){  reject(new Error('오류'));  }).catch(function(error){  console.log(error.message);  }); Promise.reject(new Error('오류')).catch(function(error){  console.log(error.message);  });

313. Promise.prototype.then 메서드 체인 promise

314. 객체의

315. then()과

316. catch()를

317. 이용해

318. 메서드를

319. 체인할

320. 수

321. 있다.

322. 메서드를

323. 체인하여

324. 작성한

325. 콜백

326. 함수는

327. 등록한

328. 순서대로

329. 처리된다.

330. 28

331. Promise.prototype.then 메서드 체인 promise

332. 객체의

333. then()과

334. catch()를

335. 이용해

336. 메서드를

337. 체인할

338. 수

339. 있다.

340. 메서드를

341. 체인하여

342. 작성한

343. 콜백

344. 함수는

345. 등록한

346. 순서대로

347. 처리된다.

348. 29 function taskA(){  console.log('Task A');  }    function taskB(){  console.log('Task B');  }    function onRejected(error){  console.log('Catch Error: A or B', error);  }    function finalTask(){  console.log('Final Task');  }    var promise = Promise.resolve();    promise.then(taskA)  .then(taskB)  .catch(onRejected)  .then(finalTask); TaskA TaskB FinalTask onRejected

349. Promise.prototype.then 메서드 체인 만약

350. TaskA에서

351. 에러가

352. 발생하면

353. TaskB는

354. 실행되지

356. 않고

358. onRejected와

359. finalTask

360. 순으로

361. 처리된다.

362. 30 function taskA(){  console.log('Task A');  throw new Error('throw Error @ Task A');  }    function taskB(){  console.log('Task B');  }    function onRejected(error){  console.log('Catch Error: A or B', error);  }    function finalTask(){  console.log('Final Task');  }    var promise = Promise.resolve();    promise.then(taskA)  .then(taskB)  .catch(onRejected)  .then(finalTask); TaskA TaskB FinalTask onRejected function taskA(){  console.log('Task A');  return Promise.reject(new Error(…));  }

363. Promise.prototype.then 결과 값 전달 어떤

364. onFulfilled의

365. 반환

366. 값은

368. 다음

369. onFulfilled에

370. 인자로

371. 전달된다.

372. 31

374. onFulfilled의

375. 반환

376. 값은

378. 다음

379. onFulfilled에

380. 인자로

381. 전달된다.

382. 32 function doubleUp(value){  return value * 2;  }    function increment(value){  return value + 1;  }    function output(value){  console.log(value);  }    var promise = Promise.resolve(1);    promise.then(increment)  .then(doubleUp)  .then(output); increment doubleUp output 1 2 4

384. onFulfilled의

385. 반환

386. 값은

388. 다음

389. onFulfilled에

390. 인자로

391. 전달된다.

392. 33 function doubleUp(value){  return value * 2;  }    function increment(value){  return value + 1;  }    function output(value){  console.log(value);  }    var promise = Promise.resolve(1);    promise.then(increment)  .then(doubleUp)  .then(output); increment doubleUp output 1 2 4 반환

393. 값으로는

394. 숫자,

395. 문자열,

396. 객체뿐

397. 아니라

398. Promise도

399. 가능하다.

400. 내부

401. 적으로는

402. Promise.resolve(반환

403. 값)처럼

404. 처리

405. 되기

406. 떄문에

407. 무엇을

408. 반환하더라도

409. 최종적으로는

410. 새로운

411. promise

412. 객체가

413. 반환된다.

414. 즉,

415. then()은

416. 단순히

417. 콜백

418. 함수를

419. 등록하기만

420. 하는게

421. 아니라

422. 콜백에서

423. 반환한

424. 값을

425. 기준으로

426. 새로운

427. promise

428. 객체를

429. 생성해

430. 전달하는

431. 기능도

432. 하고

433. 있다.

435. function increment(value){  return Promise.resolve(value + 1);  }

436. Promise.prototype.then 복수의 비동기 요청 - callback then을

437. 이용해

438. 복수의

439. 비동기

440. 요청을

441. 구현하는

442. 방법에

443. 대해

444. 소개한다.

445. 먼저

446. 전통적인

447. 콜백

448. 스타일로

449. 이를

450. 구현해

451. 본다.

452. 34

454. 이용해

455. 복수의

456. 비동기

457. 요청을

458. 구현하는

459. 방법에

460. 대해

461. 소개한다.

462. 먼저

463. 전통적인

464. 콜백

465. 스타일로

466. 이를

467. 구현해

468. 본다.

469. 35 function ajax(URL, callback){  var req = new XMLHttpRequest();    req.open('GET', URL, true);  req.onload = function(){  if(req.status === 200){  callback(null, req.responseText);  }else{  callback( new Error(req.statusText), req.response );  }  };    req.onerror = function(){  callback(new Error(req.statusText));  };    req.send();  } function jsonify(callback, error, value){  var result;    if(error){  callback(error, value);  }else{  try{  result = JSON.parse(value);  callback(null, result);  }catch(err){  callback(err, value);  }  }  } 계속

473. 이용해

474. 복수의

475. 비동기

476. 요청을

477. 구현하는

478. 방법에

479. 대해

480. 소개한다.

481. 먼저

482. 전통적인

483. 콜백

484. 스타일로

485. 이를

486. 구현해

487. 본다.

488. 36 var request = {  cards : function(callback){  return ajax('/api/cards', jsonify.bind(null, callback));  },  insurances : function(callback){  return ajax('/api/insurances', jsonify.bind(null, callback));  }  }; function all(requests, record, callback){  var req;    if(requests.length === 0){  return callback(null, record);  }    req = requests.shift();    req(function(error, value){  if(error){  callback(error, value);  }else{  record.push(value);  all(requests, record, callback);  }  });  } all([request.cards, request.insurances], [], function(error, value){  if(error){  console.log(error);  }else{  console.log(value);  }  });

489. Promise.prototype.then 복수의 비동기 요청 - then 전통적인

490. 콜백

491. 패턴이

492. 가지고

493. 있는

494. 문제를

495. then()으로

496. 해결해보자.

497. (이해를

498. 돕기

499. 위해

500. then()을

501. 사용하지만,

502. 사실

504. 복수의

505. 비동기

506. 처리

507. 시

508. 유용한

509. Promise.all()과

510. Promise.race()가

511. 있다.)

512. 37

514. 콜백

515. 패턴이

516. 가지고

517. 있는

518. 문제를

519. then()으로

521. (이해를

522. 돕기

523. 위해

524. then()을

526. 사실

528. 복수의

529. 비동기

530. 처리

531. 시

532. 유용한

535. 있다.)

536. 38 function ajax(URL){  return new Promise(function(resolve, reject){  var req = new XMLHttpRequest();    req.open('GET', URL, true);  req.onload = function(){  if(req.status === 200){  resolve(req.responseText);  }else{  reject(new Error(req.statusText));  }  };    req.onerror = function(){  reject(new Error(req.statusText));  };    req.send();  })  } var request = {  cards : function(){  return ajax('/api/cards') .then(JSON.parse)  },  insurances : function(){  return ajax('/api/insurances') .then(JSON.parse)  }  };

538. 콜백

539. 패턴이

540. 가지고

541. 있는

542. 문제를

543. then()으로

545. (이해를

546. 돕기

547. 위해

548. then()을

550. 사실

552. 복수의

553. 비동기

554. 처리

555. 시

556. 유용한

559. 있다.)

560. 39 function all(){  var record = [];    function recording(value){  record.push(value);  return record;  }    return request.cards().then(recording)  .then(request.insurances).then(recording);  } all().then(function(value){  console.log(value);  }).catch(function(error){  console.log(error);  });

561. Promise.prototype.catch IE에서의 문제 전catch()는

562. Promise.then(undefined,

563. onRejected)를

564. 랩핑한

565. 메서드다.

566. promise

567. 객체가

568. Rejected

569. 상태가

570. 됐을

571. 때

572. 호출될

573. 콜백

574. 함수를

575. 등록하기

576. 위해

577. 사용한다.

578. 40 위는

579. polyfill을

580. 사용한

581. 상태에서

582. Promise

583. 동작

584. 여부를

585. 테스트한

587. 사진이다.

588. IE8

589. 이하

590. 브라우저에서는

591. “식별자를

592. 찾을

593. 수

594. 없습니다”

595. 라는

596. 메시지와

597. 함께

598. Syntac

599. Error가

600. 발생한다.

601. var promise = Promise.reject(new Error('message'));    promise.catch(function(error){  console.log(error.message);   }); var promise = Promise.reject(new Error('message'));    promise['catch'](function(error){  console.log(error.message);  }); var promise = Promise.reject(new Error('message'));    promise.then(undefined, function(error){  console.log(error.message);  }); ECMAScript3에서는

602. 예약어를

603. 객체의

604. 프로퍼티

605. 명으로

606. 사용할

607. 수

608. 없다.

609. IE8이하

610. 버전은

611. ECMAScript3를

612. 따를

613. 브라우저이다.

614. 이런

615. 문제를

616. 미연에

617. 방지하고자

618. 일부

619. 라이브러리는

620. caught,

621. fail

622. 등과

623. 같은

624. 이름으로

625. catch()와

626. 동일한

627. 기능을

628. 하는

629. 메서드를

630. 지원한다.

632. Promise.all 복수의 비동기 요청 - all 복수의

633. 비동기

634. 로직은

635. Promise.all()을

636. 이용하면

637. 간단하게

638. 작성할

639. 수

640. 있다.

641. 41

642. Promise.all 복수의 비동기 요청 - all 복수의

643. 비동기

644. 로직은

645. Promise.all()을

646. 이용하면

647. 간단하게

648. 작성할

649. 수

650. 있다.

651. 42 Promise.all([  ajax('/api/cards').then(JSON.parse),  ajax('/api/insurances').then(JSON.parse)  ]).then(function(value){  console.log(value);  }).catch(function(error){  console.log(error);  }); Promise.all()는

652. 인자로

653. promise

654. 객체를

655. 원소로

656. 가진

657. 배열을

658. 받는다.

659. 처리가

660. 완료된

661. 후

662. 값

663. 순서는

664. 배열의

665. 순서와

666. 같다.

668. 하나

669. 명심해야할

670. 점은

671. Promise.all()은

672. 복수의

673. 비동기

674. 로직을

675. 순차적

677. 실행하지

678. 않고

679. 동시에

680. 실행한다는

681. 점이다.

682. function timer(delay){  return new Promise(function(resolve){  setTimeout(function(){  resolve(delay);  }, delay);  })  }    var start = Date.now();    Promise.all([  timer(1),  timer(32),  timer(64),  timer(128)  ]).then(function(values){  console.log(Date.now() - start + 'ms');  console.log(values);  });

683. Promise.race 복수의 비동기 요청 - race Promise.all()과

684. 마찬가지로

685. promise

686. 객체를

687. 배열로

688. 전달

689. 받아

691. 복수의

692. 비동기

693. 로직을

694. 처리한다.

696. Promise.race()는

698. 달리

699. promise

700. 객체

701. 중

702. 하나

703. 만

704. 완료돼도

705. 다음

706. 동작으로

707. 넘어간다.

708. 43

709. Promise.race 복수의 비동기 요청 - race Promise.all()과

710. 마찬가지로

711. promise

712. 객체를

713. 배열로

714. 전달

715. 받아

717. 복수의

718. 비동기

719. 로직을

720. 처리한다.

722. Promise.race()는

724. 달리

725. promise

726. 객체

727. 중

728. 하나

729. 만

730. 완료돼도

731. 다음

732. 동작으로

733. 넘어간다.

734. 44 function timer(delay){  return new Promise(function(resolve){  setTimeout(function(){  resolve(delay);  }, delay);  })  }    var start = Date.now();    Promise.race([  timer(1),  timer(32),  timer(64),  timer(128)  ]).then(function(values){  console.log(Date.now() - start + 'ms');  console.log(values);  });

735. PROMISES의 특징

736. 항상 비동기로 처리되는 Promise 항상 비동기로 처리 46 Promise.resolve()나

737. resolve()를

738. 사용하면

739. promise

740. 객체는

741. 바로

742. Fulfilled

743. 상태가

744. 되므 로

745. then()으로

746. 등록한

747. 콜백

748. 함수도

749. 동기적으로

750. 호출될

751. 것이라

752. 예상된다.

754. 항상 비동기로 처리되는 Promise 항상 비동기로 처리 Promise.resolve()나

755. resolve()를

756. 사용하면

757. promise

758. 객체는

759. 바로

760. Fulfilled

761. 상태가

762. 되므 로

763. then()으로

764. 등록한

765. 콜백

766. 함수도

768. 호출될

769. 것이라

770. 예상된다.

771. 47 var promise = new Promise(function(resolve){  console.log('inner promise');  resolve(42);  });    promise.then(function(value){  console.log(value);  });    console.log('outer promise'); 노트

772. :

773. ES6

774. Promises

775. 사양에는

776. promise

777. 객체의

778. 상태가

779. 이미

780. 정해져

781. 있다

782. 하더라도

783. 비동기로

784. 처리

785. 돼야

797. 한다고

798. 정하고

799. 있다.

801. 항상 비동기로 처리되는 Promise 동기와 비동기 혼재의 위험성 데이터를

802. 즉시

803. 사용할

804. 수

805. 있더라도

806. 절대로

807. 비동기

808. 콜백을

810. 호출하면

811. 안된다.

812. 비동기

813. 콜백을

815. 호출하면

816. 기대한

817. 연산의

818. 순서를

819. 방해하고

820. 예상치

821. 않은

822. 코드 의

823. 간섭을

824. 초래할

825. 수

826. 있다.

872. -

873. 이펙티브

874. 자바스크립트

875. -

876. 48 function onReady(callback){  var readyState = document.readyState;    if(readyState === 'interactive' || readyState === 'complete'){  callback();  }else{  window.addEventListener( 'DOMContentLoaded', callback );  }  }    onReady(function(){  console.log('DOM fully loaded and parsed');  });    console.log('starting...'); if(readyState === 'interactive' || readyState === 'complete'){  setTimeout(fn, 0)  }else{ function onReady(){  return new Promise(function(resolve){  var readyState = document.readyState;    if(readyState === 'interactive' || readyState === 'complete'){  resolve();  }else{  window.addEventListener( 'DOMContentLoaded', resolve);  }  });  }    onReady().then(function(){  console.log('DOM fully loaded and parsed');  });    console.log('starting...');

877. 새로운 promise 객체를 반환하는 then 새로운 promise 객체를 반환 Promise

878. 로직을

879. 보면

880. 모두

881. 최초의

882. promise

883. 객체에

884. 메서드를

885. 체인하는

886. 것

887. 처럼

888. 보인다.

889. 하지만

890. 실제로는

891. then()과

892. catch()

893. 모두

894. 새로운

895. promise

896. 객체를

897. 생성해

898. 반환한다.

899. 49

901. 로직을

902. 보면

903. 모두

904. 최초의

905. promise

906. 객체에

907. 메서드를

908. 체인하는

909. 것

910. 처럼

911. 보인다.

912. 하지만

913. 실제로는

914. then()과

915. catch()

916. 모두

917. 새로운

918. promise

919. 객체를

920. 생성해

921. 반환한다.

922. 50 var promise = new Promise(function(resolve){  resolve(100);  });    var thenPromise = promise.then(function(value){  console.log(value);  });    var catchPromise = thenPromise.catch(function(error){  console.log(error);  });    console.log(promise === thenPromise);  console.log(thenPromise === catchPromise); onFulﬁlled onRejected onRejected promise object promise object value error error then catch

924. 로직을

925. 보면

926. 모두

927. 최초의

928. promise

929. 객체에

930. 메서드를

931. 체인하는

932. 것

933. 처럼

934. 보인다.

935. 하지만

936. 실제로는

937. then()과

938. catch()

939. 모두

940. 새로운

941. promise

942. 객체를

943. 생성해

944. 반환한다.

945. 51 var promise = new Promise(function(resolve){  resolve(100);  });    promise.then(function(value){  return value * 2;  });    promise.then(function(value){  return value * 2;  });    promise.then(function(value){  console.log(value); // 100  }); var promise = new Promise(function(resolve){  resolve(100);  });    promise.then(function(value){  return value * 2;  }).then(function(value){  return value * 2;  }).then(function(value){  console.log(value); // 100 * 2 * 2  }); function anAsyncCall(){  var promise = Promise.resolve();    promise.then(function(){  // something do...  });    return promise;  }

946. 예외 처리가 되지 않는 onRejected 예외 처리가 되지 않는 경우 then()을

947. 이용해

948. onFulfilled와

949. onRejected를

950. 모두

951. 등록한다면

952. 예외

953. 처리가

954. 되지

955. 않는

956. 상황이

957. 발생한다.

958. 52

959. 예외 처리가 되지 않는 onRejected 예외 처리가 되지 않는 경우 then()을

960. 이용해

961. onFulfilled와

962. onRejected를

963. 모두

964. 등록한다면

965. 예외

966. 처리가

967. 되지

968. 않는

969. 상황이

970. 발생한다.

971. 53 Promise.resolve(30).then(function(value){  throw new Error(value);  }, function(error){  console.log('BAD');  console.log(error);  });    Promise.resolve(20).then(function(value){  throw new Error(value);  }).catch(function(error){  console.log('GOOD');  console.log(error);  });    Promise.resolve(10).then(function(value){  throw new Error(value);  }).then(undefined, function(error){  console.log('OK');  console.log(error);  });

972. 콜백-헬과 무관한 Promise 만능의 도구가 아니다. Promise는

973. 콜백-헬을

974. 해결할

975. 수

976. 있는

977. 만능의

978. 도구가

979. 아니다.

980. 통일된

981. 인터페이스로

982. 데이 터를

983. 전달할

984. 수

985. 있는

986. 컨테이너로써

987. 장점을

988. 발휘하는

989. 것이다.

990. 54 ?

992. 콜백-헬과 무관한 Promise 만능의 도구가 아니다. Promise는

993. 콜백-헬을

994. 해결할

995. 수

996. 있는

997. 만능의

998. 도구가

999. 아니다.

1000. 통일된

1001. 인터페이스로

1002. 데이 터를

1003. 전달할

1004. 수

1005. 있는

1006. 컨테이너로써

1007. 장점을

1008. 발휘하는

1009. 것이다.

1010. 55 some().then(function(){  // do something...  }).then(function(){  // do something...  }).then(function(){  // do something...  }).then(function(){  // do something...  }).catch(function(){  // do something...  });

1011. 콜백-헬과 무관한 Promise 만능의 도구가 아니다. 콜백-헬에

1012. 빠진

1013. 상태라면

1014. 분석한

1015. 모델이

1016. 이미

1017. 깨져있고,

1018. 관심사를

1019. 제대로

1020. 나누지

1021. 않았다 는

1022. 방증이다.

1024. 이는

1025. Promise로도

1026. 해결할

1027. 수

1028. 없다.

1029. 56 커넥터 로직 비즈니스 로직 엔티티 로직 서비스 로직 DAO 로직 스토리지 엔티티 (DTO) DAO 커넥터 비즈니스 서비스 값 객체

1030. 콜백-헬과 무관한 Promise 설계 •  사용자가

1031. /api/stores

1032. 를

1033. GET

1034. 요청하면

1035. 상점

1036. 리스트를

1037. 반환한다.

1038. •  사용자가

1039. /api/stores/:id

1040. 를

1041. GET

1042. 요청하면

1043. 상점을

1044. 반환한다.

1045. •  데이터베이스엔

1046. 상점

1047. 테이블과

1048. 카테고리

1049. 테이블이

1050. 별도로

1051. 존재한다.

1052. 57

1053. 콜백-헬과 무관한 Promise 설계 •  사용자가

1054. /api/stores

1055. 를

1056. GET

1057. 요청하면

1058. 상점

1059. 리스트를

1060. 반환한다.

1061. •  사용자가

1062. /api/stores/:id

1063. 를

1064. GET

1065. 요청하면

1066. 상점을

1067. 반환한다.

1068. •  데이터베이스엔

1069. 상점

1070. 테이블과

1071. 카테고리

1072. 테이블이

1073. 별도로

1074. 존재한다.

1075. 58 Stores Categories DB Connector Market client

1076. 콜백-헬과 무관한 Promise Store 클래스 Store

1077. 클래스를

1078. 작성한다.

1079. 59

1080. 콜백-헬과 무관한 Promise Store 클래스 Store

1081. 클래스를

1082. 작성한다.

1083. 60 var Stores = function(connector){  this._connector = connector;  };    Stores.prototype = {  findAll : function(){  var self = this;    return new Promise(function(resolve){  var stores = self._connector.where();  resolve(stores.items);  })  },    findBy : function(id){  var self = this;    return new Promise(function(resolve, reject){  var store = self._connector.get(parseInt(id, 10));    if(store){  resolve(store);  }else{  reject(new Error('Not Found.'));  }  });  }  };    module.exports = Stores;

1084. 콜백-헬과 무관한 Promise Categories 클래스 Categories

1085. 클래스

1086. 작성하기

1087. 61

1088. 콜백-헬과 무관한 Promise Categories 클래스 Categories

1089. 클래스

1090. 작성하기

1091. 62 var Categories = function(connector){  this._connector = connector;  };    Categories.prototype = {  findAll : function(){  var self = this;    return new Promise(function(resolve){  var categories = self._connector.where();  resolve(categories.items);  })  },    findBy : function(id){  var self = this;    return new Promise(function(resolve, reject){  var category = self._connector.where({_id : id}).items[0];    if(category){  resolve(category);  }else{  reject(new Error('Not Found.'));  }  });  }  };    module.exports = Categories;

1092. 콜백-헬과 무관한 Promise Market 클래스 Market

1093. 클래스

1094. 작성하기

1095. 63

1097. 클래스

1098. 작성하기

1099. 64 var Market = function(){  this._stores = new Stores(db.collection('stores'));  this._categories = new Categories(db.collection('categories'));  };    Market.prototype = {  stores : function(){  return Promise.all([  this._stores.findAll(),  this._categories.findAll()  ]).then(function(values){  var stores = values[0],  categories = values[1];    stores.forEach(function(store){  store.category = categories.find(function(category){  return category._id === store.category_id;  });  });    return stores;  })  }, 계속

1103. 클래스

1104. 작성하기

1105. 65 store : function(id){  var self = this,  store = null;    return this._stores.findBy(id).then(function(values){  store = values;  return self._categories.findBy(store.category_id);  }).then(function(category){  store.category = category;  return store;  });  }  };    module.exports = Market;

1106. 콜백-헬과 무관한 Promise 최종 app.js에서

1107. Market

1108. 객체

1109. 사용하기

1110. 66 router.route('/stores').get(function(req, res) {  market.stores().then(function(stores){  res.json(stores);  }).catch(function(err){  res.writeHead(404, {Content-Type: text/plain});  res.end(err.message);  })  });    router.route('/stores/:id').get(function(req, res) {  market.store(req.params.id).then(function(store){  res.json(store);  }).catch(function(err){  res.writeHead(404, {Content-Type: text/plain});  res.end(err.message);  })  });

1111. Promises 직접 구현하기

1112. 시작하기 전에 핵심 68 function doSomething(callback){  var value = 42;  callback(null, value);  } doSomething(function(error, value){  console.log('Got a value : ', value);  }); function doSomething(){  return {  then : function(callback){  var value = 42;  callback(value);  }  }  } doSomething().then(function(value){  console.log('Got a value : ', value);  }); 전통적인 콜백 패턴을 단순하게 변환한 것으로 큰 의미는 없어 보이지만, Promise의 근본적인 철학은 이미 다루고 있다. Promise는 객체 내에 처리 결과를 보유한다. Promise는 결과 값을 추상화한 객체를 전달한다.

1113. 스텝 1 Promise 클래스 정의 69 new

1114. 연산자를

1115. 사용해

1116. Promise

1117. 인스턴스를

1118. 생성할

1119. 수

1120. 있어야

1121. 하므로

1122. 클래스를

1123. 정의한다.

1125. 스텝 1 Promise 클래스 정의 70 new

1126. 연산자를

1127. 사용해

1128. Promise

1129. 인스턴스를

1130. 생성할

1131. 수

1132. 있어야

1133. 하므로

1134. 클래스를

1135. 정의한다.

1136. var Promise = function(fn){  this._onFulfilled = null;    fn(this._resolve.bind(this));  };    Promise.prototype = {    then : function(onFulfilled){  this._onFulfilled = onFulfilled;  },    _resolve : function(value){  this._onFulfilled(value);  }  };

1137. 스텝 1 Promise 클래스 정의 71 앞

1138. 슬라이드에서

1139. 구현한

1140. 코드는

1141. 동작하지

1142. 않는다.

1143. resolve()가

1144. then()보다

1145. 먼저

1146. 호출되어

1147. 그

1148. 결과

1149. _onFulfilled는

1150. null이

1151. 되어버리기

1152. 때문이다.

1153. 이

1154. 문제를

1155. 회피하기

1156. 위해

1158. setTimeout()을

1159. 사용한다.

1162. 스텝 1 Promise 클래스 정의 72 앞

1163. 슬라이드에서

1164. 구현한

1165. 코드는

1166. 동작하지

1167. 않는다.

1168. resolve()가

1169. then()보다

1170. 먼저

1171. 호출되어

1172. 그

1173. 결과

1175. null이

1176. 되어버리기

1177. 때문이다.

1178. 이

1179. 문제를

1180. 회피하기

1181. 위해

1183. setTimeout()을

1184. 사용한다.

1186. _resolve : function(value){  + var self = this; + setTimeout(function(){  self._onFulfilled(value);  + }.bind(this), 1);   }

1187. 스텝 2 fulfilled 상태와 resolve 73 setTimeout()은

1188. 한계가

1189. 있다.

1190. then()을

1191. 비동기로

1192. 호출하면

1193. 다시

1195. null이

1196. 된다.

1197. Promise에는

1198. 상태가

1199. 있다.

1200. 이

1201. 상태를

1202. 이용하면

1203. setTimeout을

1204. 제거하면서

1205. 동기/비 동기에

1206. 상관없이

1207. then()을

1208. 호출할

1209. 수

1210. 있다.

1214. 한계가

1215. 있다.

1216. then()을

1217. 비동기로

1218. 호출하면

1219. 다시

1221. null이

1222. 된다.

1223. Promise에는

1224. 상태가

1225. 있다.

1226. 이

1227. 상태를

1228. 이용하면

1229. setTimeout을

1232. 상관없이

1233. then()을

1234. 호출할

1235. 수

1236. 있다.

1238. var Promise = function(fn){  + this._state = 'pending';  + this._value = null;  + this._deferred = null;  this._onFulfilled = null;  ...  Promise.prototype = {    then : function(onFulfilled){ - this._onFulfilled = onFulfilled;  + this._handle(onFulfilled);   },  _resolve : function(value){  - setTimeout(function(){  - this._onFulfilled(value);  - }.bind(this), 1);  + this._value = value;  + this._state = 'fulfilled';  + if(this._deferred){  + this._handle(this._deferred);   + } }, 계속

1242. 한계가

1243. 있다.

1244. then()을

1245. 비동기로

1246. 호출하면

1247. 다시

1249. null이

1250. 된다.

1251. Promise에는

1252. 상태가

1253. 있다.

1254. 이

1255. 상태를

1256. 이용하면

1257. setTimeout을

1260. 상관없이

1261. then()을

1262. 호출할

1263. 수

1264. 있다.

1266. + _handle : function(onFulfilled){  + if(this._state === 'pending'){  + this._deferred = onFulfilled;  + return false;  + }    + onFulfilled(this._value);  + }  };

1267. 스텝 3 Promise의 체이닝 76 Promise의

1268. 상태는

1269. 한번

1270. 변화하면

1271. 더이상

1272. 변하지

1273. 않는다.

1274. 이

1275. 조건을

1276. 고려하여

1277. Promise

1278. 체 이닝을

1279. 구현한다.

1281. 스텝 3 Promise의 체이닝 77 Promise의

1282. 상태는

1283. 한번

1284. 변화하면

1285. 더이상

1286. 변하지

1287. 않는다.

1288. 이

1289. 조건을

1290. 고려하여

1291. Promise

1292. 체 이닝을

1293. 구현한다.

1294. var Promise = function(fn){  ...  - this._onFulfilled = null;  ...    Promise.prototype = {    then : function(onFulfilled){  - this._handle(onFulfilled); + var self = this; + return new Promise(function(resolve){  + self._handle({  + onFulfilled : onFulfilled,  + resolve : resolve  + });  + }.bind(this));  },    _resolve : function(value){  ...  }, _handle : function(handler){  if(this._state === 'pending'){  this._deferred = handler;  return false;  }    + var result = handler.onFulfilled(this._value);  + handler.resolve(result);  - onFulfilled(this._value);  }  };

1295. 스텝 3 Promise의 체이닝 78 then()의

1296. callback

1297. 전달인자는

1298. 옵셔널하게

1299. 한다.

1300. _handle : function(handler){  if(this._state === 'pending'){  this._deferred = handler;  return false;  }    + if(!handler.onFulfilled){  + handler.resolve(this._value);  + return false;  + }    var result = handler.onFulfilled(this._value);  handler.resolve(result);  }

1301. 스텝 3 Promise의 체이닝 79 then()으로

1302. 등록한

1303. 콜백은

1304. 값

1305. 뿐만

1306. 아니라

1307. Promise

1308. 객체도

1309. 전달할

1310. 수

1311. 있어야

1312. 한다.

1313. 그리고

1314. 그

1315. 객체가

1316. 해결한

1317. 값이

1318. 다음

1319. 처리에

1320. 전달된다.

1322. 스텝 3 Promise의 체이닝 80 then()으로

1323. 등록한

1324. 콜백은

1325. 값

1326. 뿐만

1327. 아니라

1328. Promise

1329. 객체도

1330. 전달할

1331. 수

1332. 있어야

1333. 한다.

1334. 그리고

1335. 그

1336. 객체가

1337. 해결한

1338. 값이

1339. 다음

1340. 처리에

1341. 전달된다.

1342. resolve : function(value){  + if(value typeof value.then === 'function'){  + value.then(this._resolve.bind(this));  + return false;  + }    this._state = 'fulfilled';  this._value = value;    if(this._deferred){  this._handle(this._deferred);  }  },

1343. 스텝 4 rejected 상태와 reject 81 무엇인가

1344. 문제가

1345. 생긴

1346. 경우에는

1347. 원인과

1348. 함께

1349. 거부(reject)해야

1350. 한다.

1351. 계속

1355. 문제가

1356. 생긴

1357. 경우에는

1358. 원인과

1359. 함께

1361. 한다.

1362. var Promise = function(fn){  ...  fn(  this._resolve.bind(this),  + this._reject.bind(this)  );  };    Promise.prototype = {    then : function(onFulfilled, onRejected){  return new Promise(function(resolve, reject){  this._handle({  onFulfilled : onFulfilled,  + onRejected : onRejected,  resolve : resolve,  + reject : reject  });  }.bind(this))  },    + _reject : function(error){  + this._state = 'rejected';  + this._value = error;    + if(this._deferred){  + this._handle(this._deferred);  + }  + }, 계속

1366. 문제가

1367. 생긴

1368. 경우에는

1369. 원인과

1370. 함께

1372. 한다.

1373. _handle : function(handler){  + var callback = null;    ...    + if(this._state === 'fulfilled'){  + callback = handler.onFulfilled;  + }else{  + callback = handler.onRejected;  + }    + if(!callback){  + if(this._state === 'fulfilled'){  + handler.resolve(this._value);  + }else{  + handler.reject(this._value);  + }    + return false;  + } var result = callback(this._value); ...  };

1374. 스텝 4 예기치 못한 에러 84 Promise는

1375. 예상

1376. 밖의

1377. 예외를

1378. 대응하고

1379. 적절히

1380. 거부할

1381. 수

1382. 있어야

1383. 한다.

1384. var Promise = function(fn){  this._state = 'pending';  this._value = null;  this._deferred = null;    + try{  fn(  this._resolve.bind(this),  this._reject.bind(this)  );  + }catch(error){  + this._reject(error);  + }  }; _handle : function(handler){  var callback = null,  + result = null;  ...  + try{  + result = callback(this._value);  + }catch(error){  + handler.reject(error);  + return false;  + }    handler.resolve(result);  }

1385. 스텝 5 항상 비동기로 호출 85 Promise는

1386. 항상

1387. 비동기로

1388. 호출돼야

1389. 한다.

1391. 스텝 5 항상 비동기로 호출 86 Promise는

1392. 항상

1393. 비동기로

1394. 호출돼야

1395. 한다.

1396. _handle : function(handler){  var callback = null,  result = null,  + self = this;    if(this._state === 'pending'){  this._deferred = handler;  return false;  }    + setTimeout(function(){  ...  + }, 0);  }

1397. 참고자료 http://blog.coderiﬂeman.com/post/102749244059 http://www.hanbit.co.kr/ebook/look.html?isbn=9788968487293

1398. http://www.mattgreer.org/articles/promises-in-wicked-detail/

1400. Thank you.

JavaScript Promises

More Related Content

What's hot (20)

Similar to JavaScript Promises (11)

More from 우영 주 (19)

JavaScript Promises