promise用法
对比传统回调函数与Pormise的写法
传统回调函数
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
| function run(callback) { let parmas = 0; if (callback) callback(parmas); }; function fnStep1(callback) { let parmas = 123; if (callback) callback(parmas); }; function fnStep2(callback) { let parmas = 456; if (callback) callback(parmas); }; function fnStep3(callback) { let parmas = 789; if (callback) callback(parmas); };
run(function (parmas) { console.log(parmas); fnStep1(function (parmas1) { console.log(parmas1); fnStep2(function (parmas2) { console.log(parmas2); fnStep3(function (parmas3) { }); }); }); });
|
Promise的写法
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
| let p = new Promise((resolve, reject) => { const parmas = 0; resolve(parmas); })
p .then( (parmas) => { console.log(parmas); return 123; } ) .then( (parmas) => { console.log(parmas); return 456; } ) .then( (parmas) => { console.log(parmas); return 789; } )
|
Promise要比传统回调函数更简洁直观,可读性更强。
那如何使用Promise进行异步回调? 如何捕获错误?
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
| function asyncFn(a) {
return new Promise((resolve, reject) => { a += 1; setTimeout(function () { resolve(a); }, 2000); });
}
asyncFn(1).then( (a) => { console.log(a);
const newVal = 5; return newVal; } ).then( (newVal) => {
} ).catch( (err)=>{ console.log(err) } );
|