|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
// "承诺将来会执行"的对象在JavaScript中称为Promise对象 // new Promise(function (resolve, reject) {}); // then回调resolve catch回调reject // Math.random() * 2 < 1 会走then的回调，反之走catch的回调 <div id="test-promise-log"> <p>Log:</p> </div> 'use strict'; var logging = document.getElementById('test-promise-log'); function log(s) { var p = document.createElement('p'); p.innerHTML = s; logging.appendChild(p); } var p = new Promise(function (resolve, reject) { var ran = Math.random() * 2; log('the random num is ' + ran); setTimeout(function(){ if (ran < 1) { resolve('quick'); } else { reject('slow'); } }, ran * 1000); }); p.then(function(data) { log('good:' + data); }).catch(function(data) { log('bad:' + data); }); // 若干异步任务，任务1完成->任务2完成->任务3... 任何一个点失败->异常处理 // job1.then(job2).then(job3).catch(handleError); // job1、job2、job3...都是promise对象 // 5 * 5 -> 25 + 25 -> 50 * 50 -> 2500 + 2500 = 5000 function multiply(input) { return new Promise(function(resolve, reject) { log('calculating ' + input + ' x ' + input + '...'); setTimeout(resolve, 500, input * input); }); } function add(input) { return new Promise(function(resolve, reject){ log('calculating ' + input + ' + ' + input + '...'); setTimeout(resolve, 500, input + input); }); } var p = new Promise(function(resolve, reject){ log('start to calculat'); resolve(5); }); p.then(multiply) .then(add) .then(multiply) .then(add) .then(function(result) { log('result=' + result); }); // 除了串行执行若干异步任务外，Promise还可以并行执行异步任务 var p1 = new Promise(function (resolve, reject) { setTimeout(resolve, 500, 'P1'); }); var p2 = new Promise(function (resolve, reject) { setTimeout(resolve, 600, 'P2'); }); // 同时执行p1和p2，并在它们都完成后执行then Promise.all([p1, p2]).then(function (results) { console.log(results); // 获得一个Array: ['P1', 'P2'] }); // 有些时候，多个异步任务是为了容错，可以使用race获取先返回的结果 Promise.race([p1, p2]).then(function (result) { console.log(result); // 'P1' }); |
