Downloaded 85 times
![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](https://image.slidesharecdn.com/javascriptpromises-150211035205-conversion-gate02/75/JavaScript-Promises-39-2048.jpg)
![[JS] Function.prototype.bind](https://cdn.slidesharecdn.com/ss_thumbnails/jsfunction-171227143803-thumbnail.jpg?width=640&height=640&fit=bounds)
![[D2 COMMUNITY] ECMAScript 2015 S67 seminar - 1. primitive](https://cdn.slidesharecdn.com/ss_thumbnails/1primitive-161207024601-thumbnail.jpg?width=640&height=640&fit=bounds)
![[143] Modern C++ 무조건 써야 해?](https://cdn.slidesharecdn.com/ss_thumbnails/143deview2018modernc9-181011024146-thumbnail.jpg?width=640&height=640&fit=bounds)
![[토크아이티] 프런트엔드 개발 시작하기 저자 특강](https://cdn.slidesharecdn.com/ss_thumbnails/random-141024103422-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[Toolcon2014] WebStorm에서 자바스크립트 리팩토링하기](https://cdn.slidesharecdn.com/ss_thumbnails/toolcon2014-140602234750-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
JavaScript Promises
- 1. JAVASCRIPT PROMISES in ECMAScript6(Harmony)
- 2. 01 02 0304 Promise란 무엇인가? Promise 사용하기 Promise의 특징 Promise 직접 구현하기 전통적인 콜백 패 턴이 가지고 있는 문제와 Promise 정 의및 사용 방법에 대해서 개괄적으로 살펴본다. Promise의 정적 메 서드와 인스턴스 메 서 드 , 그 리 고 thenable에 관한 개념 등 조금 더 다 양하고 자세한 내 용을 살펴본다. Promise에 대해 잘 알려져 있지 않 는 중요한 특징 몇 가지를 소개한다. ES6
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 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.
- 33. 의존 구현 액터 10
- 34. Promise란? 효과 전통적인 콜백 패턴이가진 단점을 일부 보완한다. 비동기 처리 시점을 명확하게 표현한다. Promise 객체의 인터페이스를 이용해 다양한 비동기 처리를 패턴화할 수 있다. 복잡하고 불편한 비동기 예외 처리를 손쉽게 다룰 수 있다. 11
- 35.
- 36.
- 37.
- 38.
- 39. Promise란? 사용된 곳 if('serviceWorker' innavigator){ 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.
- 41.
- 42.
- 43. Constructor var promise =new Promise(function(resolve, reject){ // 비동기 처리 작성 // 처리가 끝나면 resolve 또는 reject 호출 }); Instace Method Static Method Promise.prototype.then(onFulfilled,
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 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.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 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.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.
- 188. 호출된다. onRejected reject() error onFulfilled 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.
- 190. Promise.resolve new Promise() 단축표기 Promise.resolve()를
- 191.
- 192.
- 193.
- 194.
- 195.
- 196.
- 197.
- 198.
- 199.
- 200. Promise.resolve new Promise() 단축표기 Promise.resolve()를
- 201.
- 202.
- 203.
- 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.
- 211.
- 212.
- 213.
- 214.
- 215.
- 216.
- 217.
- 218.
- 219.
- 220.
- 221.
- 222.
- 223.
- 224.
- 225.
- 226.
- 227.
- 228.
- 229.
- 230.
- 231.
- 232.
- 233.
- 234.
- 235.
- 236.
- 237.
- 238.
- 239.
- 240.
- 241.
- 242.
- 243.
- 244.
- 245.
- 246.
- 247.
- 248.
- 249.
- 250.
- 251.
- 252.
- 253.
- 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.
- 260.
- 261.
- 262.
- 263.
- 264.
- 265.
- 266.
- 267.
- 268.
- 269.
- 270.
- 271.
- 272.
- 273.
- 274.
- 275.
- 276.
- 277.
- 278.
- 279.
- 280.
- 281.
- 282.
- 283.
- 284.
- 285.
- 286.
- 287.
- 288.
- 289.
- 290.
- 291.
- 292.
- 293.
- 294.
- 295.
- 296.
- 297.
- 298.
- 299.
- 300.
- 301.
- 302.
- 303. Promise.reject new Promise() 단축표기 Promise.reject()를
- 304.
- 305.
- 306.
- 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.
- 314.
- 315.
- 316.
- 317.
- 318.
- 319.
- 320.
- 321.
- 322.
- 323.
- 324.
- 325.
- 326.
- 327.
- 328.
- 329.
- 330.
- 331.
- 332.
- 333.
- 334.
- 335.
- 336.
- 337.
- 338.
- 339.
- 340.
- 341.
- 342.
- 343.
- 344.
- 345.
- 346.
- 347.
- 348. 29 function taskA(){ console.log('TaskA'); } 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.
- 350.
- 351.
- 352.
- 353.
- 354.
- 355.
- 356.
- 357.
- 358.
- 359.
- 360.
- 361.
- 362. 30 function taskA(){ console.log('TaskA'); 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.
- 364.
- 365.
- 366.
- 367.
- 368.
- 369.
- 370.
- 371.
- 372.
- 373.
- 374.
- 375.
- 376.
- 377.
- 378.
- 379.
- 380.
- 381.
- 382. 32 function doubleUp(value){ returnvalue * 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
- 383.
- 384.
- 385.
- 386.
- 387.
- 388.
- 389.
- 390.
- 391.
- 392. 33 function doubleUp(value){ returnvalue * 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.
- 399.
- 400.
- 401.
- 402.
- 403.
- 404.
- 405.
- 406.
- 407.
- 408.
- 409.
- 410.
- 411.
- 412.
- 413.
- 414.
- 415.
- 416.
- 417.
- 418.
- 419.
- 420.
- 421.
- 422.
- 423.
- 424.
- 425.
- 426.
- 427.
- 428.
- 429.
- 430.
- 431.
- 432.
- 433.
- 434.
- 435.
- 436. Promise.prototype.then 복수의 비동기 요청- callback then을
- 437.
- 438.
- 439.
- 440.
- 441.
- 442.
- 443.
- 444.
- 445.
- 446.
- 447.
- 448.
- 449.
- 450.
- 451.
- 452.
- 453. Promise.prototype.then 복수의 비동기 요청- callback then을
- 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); } } } 계속
- 470.
- 471.
- 472. Promise.prototype.then 복수의 비동기 요청- callback then을
- 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.
- 496.
- 497.
- 498.
- 499.
- 500.
- 501.
- 502.
- 503.
- 504.
- 505.
- 506.
- 507.
- 508.
- 509.
- 510.
- 511.
- 512.
- 513. Promise.prototype.then 복수의 비동기 요청- then 전통적인
- 514.
- 515.
- 516.
- 517.
- 518.
- 519.
- 520.
- 521.
- 522.
- 523.
- 524.
- 525.
- 526.
- 527.
- 528.
- 529.
- 530.
- 531.
- 532.
- 533.
- 534.
- 535.
- 536. 38 function ajax(URL){ returnnew 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) } };
- 537. Promise.prototype.then 복수의 비동기 요청- then 전통적인
- 538.
- 539.
- 540.
- 541.
- 542.
- 543.
- 544.
- 545.
- 546.
- 547.
- 548.
- 549.
- 550.
- 551.
- 552.
- 553.
- 554.
- 555.
- 556.
- 557.
- 558.
- 559.
- 560. 39 function all(){ varrecord = []; 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.
- 562.
- 563.
- 564.
- 565.
- 566.
- 567.
- 568.
- 569.
- 570.
- 571.
- 572.
- 573.
- 574.
- 575.
- 576.
- 577.
- 578.
- 579.
- 580.
- 581.
- 582.
- 583.
- 584.
- 585.
- 586.
- 587.
- 588.
- 589.
- 590.
- 591.
- 592.
- 593.
- 594.
- 595.
- 596.
- 597.
- 598.
- 599.
- 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.
- 610.
- 611.
- 612.
- 613.
- 614.
- 615.
- 616.
- 617.
- 618.
- 619.
- 620.
- 621.
- 622.
- 623.
- 624.
- 625.
- 626.
- 627.
- 628.
- 629.
- 630.
- 631.
- 632. Promise.all 복수의 비동기 요청- all 복수의
- 633.
- 634.
- 635.
- 636.
- 637.
- 638.
- 639.
- 640.
- 641.
- 642. Promise.all 복수의 비동기 요청- all 복수의
- 643.
- 644.
- 645.
- 646.
- 647.
- 648.
- 649.
- 650.
- 651.
- 652.
- 653.
- 654.
- 655.
- 656.
- 657.
- 658.
- 659.
- 660.
- 661.
- 662.
- 663.
- 664.
- 665.
- 666.
- 667.
- 668.
- 669.
- 670.
- 671.
- 672.
- 673.
- 674.
- 675.
- 676.
- 677.
- 678.
- 679.
- 680.
- 681.
- 682. function timer(delay){ return newPromise(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.
- 686.
- 687.
- 688.
- 689.
- 690.
- 691.
- 692.
- 693.
- 694.
- 695.
- 696.
- 697.
- 698.
- 699.
- 700.
- 701.
- 702.
- 703.
- 704.
- 705.
- 706.
- 707.
- 708.
- 709. Promise.race 복수의 비동기 요청- race Promise.all()과
- 710.
- 711.
- 712.
- 713.
- 714.
- 715.
- 716.
- 717.
- 718.
- 719.
- 720.
- 721.
- 722.
- 723.
- 724.
- 725.
- 726.
- 727.
- 728.
- 729.
- 730.
- 731.
- 732.
- 733.
- 734. 44 function timer(delay){ returnnew 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.
- 736. 항상 비동기로 처리되는Promise 항상 비동기로 처리 46 Promise.resolve()나
- 737.
- 738.
- 739.
- 740.
- 741.
- 742.
- 743.
- 744.
- 745.
- 746.
- 747.
- 748.
- 749.
- 750.
- 751.
- 752.
- 753.
- 754. 항상 비동기로 처리되는Promise 항상 비동기로 처리 Promise.resolve()나
- 755.
- 756.
- 757.
- 758.
- 759.
- 760.
- 761.
- 762.
- 763.
- 764.
- 765.
- 766.
- 767.
- 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.
- 774.
- 775.
- 776.
- 777.
- 778.
- 779.
- 780.
- 781.
- 782.
- 783.
- 784.
- 785.
- 786.
- 787.
- 788.
- 789.
- 790.
- 791.
- 792.
- 793.
- 794.
- 795.
- 796.
- 797.
- 798.
- 799.
- 800.
- 801. 항상 비동기로 처리되는Promise 동기와 비동기 혼재의 위험성 데이터를
- 802.
- 803.
- 804.
- 805.
- 806.
- 807.
- 808.
- 809.
- 810.
- 811.
- 812.
- 813.
- 814.
- 815.
- 816.
- 817.
- 818.
- 819.
- 820.
- 821.
- 822.
- 823.
- 824.
- 825.
- 826.
- 827.
- 828.
- 829.
- 830.
- 831.
- 832.
- 833.
- 834.
- 835.
- 836.
- 837.
- 838.
- 839.
- 840.
- 841.
- 842.
- 843.
- 844.
- 845.
- 846.
- 847.
- 848.
- 849.
- 850.
- 851.
- 852.
- 853.
- 854.
- 855.
- 856.
- 857.
- 858.
- 859.
- 860.
- 861.
- 862.
- 863.
- 864.
- 865.
- 866.
- 867.
- 868.
- 869.
- 870.
- 871.
- 872.
- 873.
- 874.
- 875.
- 876. 48 function onReady(callback){ varreadyState = 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.
- 883.
- 884.
- 885.
- 886.
- 887.
- 888.
- 889.
- 890.
- 891.
- 892.
- 893.
- 894.
- 895.
- 896.
- 897.
- 898.
- 899.
- 900. 새로운 promise 객체를반환하는 then 새로운 promise 객체를 반환 Promise
- 901.
- 902.
- 903.
- 904.
- 905.
- 906.
- 907.
- 908.
- 909.
- 910.
- 911.
- 912.
- 913.
- 914.
- 915.
- 916.
- 917.
- 918.
- 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); onFulfilled onRejected onRejected promise object promise object value error error then catch
- 923. 새로운 promise 객체를반환하는 then 새로운 promise 객체를 반환 Promise
- 924.
- 925.
- 926.
- 927.
- 928.
- 929.
- 930.
- 931.
- 932.
- 933.
- 934.
- 935.
- 936.
- 937.
- 938.
- 939.
- 940.
- 941.
- 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.
- 949.
- 950.
- 951.
- 952.
- 953.
- 954.
- 955.
- 956.
- 957.
- 958.
- 959. 예외 처리가 되지않는 onRejected 예외 처리가 되지 않는 경우 then()을
- 960.
- 961.
- 962.
- 963.
- 964.
- 965.
- 966.
- 967.
- 968.
- 969.
- 970.
- 971. 53 Promise.resolve(30).then(function(value){ throw newError(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.
- 991.
- 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(){ // dosomething... }).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.
- 1023.
- 1024.
- 1025.
- 1026.
- 1027.
- 1028.
- 1029. 56 커넥터로직 비즈니스 로직 엔티티 로직 서비스 로직 DAO 로직 스토리지 엔티티 (DTO) DAO 커넥터 비즈니스 서비스 값 객체
- 1030.
- 1031.
- 1032.
- 1033.
- 1034.
- 1035.
- 1036.
- 1037.
- 1038.
- 1039.
- 1040.
- 1041.
- 1042.
- 1043.
- 1044.
- 1045.
- 1046.
- 1047.
- 1048.
- 1049.
- 1050.
- 1051.
- 1052.
- 1053.
- 1054.
- 1055.
- 1056.
- 1057.
- 1058.
- 1059.
- 1060.
- 1061.
- 1062.
- 1063.
- 1064.
- 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.
- 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.
- 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.
- 1096. 콜백-헬과 무관한 Promise Market클래스 Market
- 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; }) }, 계속
- 1100.
- 1101.
- 1102. 콜백-헬과 무관한 Promise Market클래스 Market
- 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.
- 1107.
- 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 functiondoSomething(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.
- 1117.
- 1118.
- 1119.
- 1120.
- 1121.
- 1122.
- 1123.
- 1124.
- 1125. 스텝 1 Promise 클래스정의 70 new
- 1126.
- 1127.
- 1128.
- 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.
- 1144.
- 1145.
- 1146.
- 1147.
- 1148.
- 1149.
- 1150.
- 1151.
- 1152.
- 1153.
- 1154.
- 1155.
- 1156.
- 1157.
- 1158.
- 1159.
- 1160.
- 1161.
- 1162. 스텝 1 Promise 클래스정의 72 앞
- 1163.
- 1164.
- 1165.
- 1166.
- 1167.
- 1168.
- 1169.
- 1170.
- 1171.
- 1172.
- 1173.
- 1174.
- 1175.
- 1176.
- 1177.
- 1178.
- 1179.
- 1180.
- 1181.
- 1182.
- 1183.
- 1184.
- 1185.
- 1186. _resolve : function(value){ +var self = this; + setTimeout(function(){ self._onFulfilled(value); + }.bind(this), 1); }
- 1187. 스텝 2 fulfilled 상태와resolve 73 setTimeout()은
- 1188.
- 1189.
- 1190.
- 1191.
- 1192.
- 1193.
- 1194.
- 1195.
- 1196.
- 1197.
- 1198.
- 1199.
- 1200.
- 1201.
- 1202.
- 1203.
- 1204.
- 1205.
- 1206.
- 1207.
- 1208.
- 1209.
- 1210.
- 1211.
- 1212.
- 1213. 스텝 2 fulfilled 상태와resolve 74 setTimeout()은
- 1214.
- 1215.
- 1216.
- 1217.
- 1218.
- 1219.
- 1220.
- 1221.
- 1222.
- 1223.
- 1224.
- 1225.
- 1226.
- 1227.
- 1228.
- 1229.
- 1230.
- 1231.
- 1232.
- 1233.
- 1234.
- 1235.
- 1236.
- 1237.
- 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); + } }, 계속
- 1239.
- 1240.
- 1241. 스텝 2 fulfilled 상태와resolve 75 setTimeout()은
- 1242.
- 1243.
- 1244.
- 1245.
- 1246.
- 1247.
- 1248.
- 1249.
- 1250.
- 1251.
- 1252.
- 1253.
- 1254.
- 1255.
- 1256.
- 1257.
- 1258.
- 1259.
- 1260.
- 1261.
- 1262.
- 1263.
- 1264.
- 1265.
- 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.
- 1278.
- 1279.
- 1280.
- 1281. 스텝 3 Promise의 체이닝 77 Promise의
- 1282.
- 1283.
- 1284.
- 1285.
- 1286.
- 1287.
- 1288.
- 1289.
- 1290.
- 1291.
- 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.
- 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.
- 1308.
- 1309.
- 1310.
- 1311.
- 1312.
- 1313.
- 1314.
- 1315.
- 1316.
- 1317.
- 1318.
- 1319.
- 1320.
- 1321.
- 1322. 스텝 3 Promise의 체이닝 80 then()으로
- 1323.
- 1324.
- 1325.
- 1326.
- 1327.
- 1328.
- 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.
- 1350.
- 1351.
- 1352.
- 1353.
- 1354. 스텝 4 rejected 상태와reject 82 무엇인가
- 1355.
- 1356.
- 1357.
- 1358.
- 1359.
- 1360.
- 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); + } + }, 계속
- 1363.
- 1364.
- 1365. 스텝 4 rejected 상태와reject 83 무엇인가
- 1366.
- 1367.
- 1368.
- 1369.
- 1370.
- 1371.
- 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.
- 1390.
- 1391. 스텝 5 항상 비동기로호출 86 Promise는
- 1392.
- 1393.
- 1394.
- 1395.
- 1396. _handle : function(handler){ varcallback = null, result = null, + self = this; if(this._state === 'pending'){ this._deferred = handler; return false; } + setTimeout(function(){ ... + }, 0); }
- 1397.
- 1398.
- 1399.
- 1400.