promise链式调用的应用
then在链式调用时,会等前一个then或者函数执行完毕,返回状态,才会执行回调函数。
(1)代码顺序执行,第一步调用了函数cook ,cook执行返回了一个promise,promise返回的是成功状态,即resolve('鸡蛋炒饭'),那么参数“'鸡蛋炒饭'”会传递给下一个then。
(2)第一个then接收“'鸡蛋炒饭'”,执行then的回调。回调中调用了eat,把'鸡蛋炒饭'作为参数传递给了eat。eat执行(里面输出的步骤就不讲了,代码顺序执行,输出的“开始吃饭”等等),并返回promise,promise返回的是成功状态,并给下一个then传递了参数'一块碗和一双筷子'。
(3)第二个then接收'一块碗和一双筷子','执行then的回调。回调中调用了wash,把'一块碗和一双筷子'作为参数传递给了wash。wash执行,并返回promise,promise返回成功状态,并给下一个then传递了参数'干净的碗筷'。
(4)最后一个then,接收'干净的碗筷”,执行回调,输出'干净的碗筷”。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script type="text/javascript"> function cook() { console.log('开始做饭。'); var p = new Promise(function(resolve, reject){ setTimeout(function() { console.log('做饭完毕!'); resolve('鸡蛋炒饭'); }, 1000); }); return p; } function eat(data) { console.log('开始吃饭:' + data); var p = new Promise(function(resolve, reject) { setTimeout(function() { console.log('吃饭完毕!'); resolve('一块碗和一双筷子');// resolve()的值会传递给then中function的data参数,供下一个方法使用。 }, 2000); }); //这里的return的作用是把第一个回调函数的返回结果作为参数,传递给第二个回调函数 return p; } function wash(data) { console.log('开始洗碗:' + data); var p = new Promise(function(resolve, reject) { setTimeout(function() { console.log('洗碗完毕!'); resolve('干净的碗筷'); }, 2000); }); return p; } //补充代码 cook().then(resolve => { return eat(resolve) //第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。所以这里要用return返回函数去传参。 }).then(resolve => { return wash(resolve); }).then(resolve => { //在Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。 //then方法执行的是resolve这个回调,并且这个函数都接受Promise对象传出的值作为参数。而这里“鸡蛋炒饭”就是作为参数传递的 console.log(resolve); //resolve中的值是传递到then方法中的参数,只有在then中通过console.log输出传入的参数,才可以在控制台查看到消息 }) //也可以像下面这样写,因为这三个函数本身设置的有return才可以这样直接写 //下一个then的回调函数,会等上一个then中的回调函数执行完毕,返回promise状态,就执行. //首先eat,wash本身就是一个函数,所以可以直接作为then中的回到函数. //然后eat,wash函数内部也返回了promise,所以这样写没有问题. cook() .then(eat) .then(wash); </script> </body> </html>
.then 中 1.return返回一个值,将返回的值作为下一个then中回调函数的参数值 2.如果返回的是一个promise对象,将这个Promise 接受状态的回调函数中参数值作为下一个then回调函数的参数值。
.then(fn(argument){})中的匿名函数实际上就是执行实例化Promise对象中的resolve(),当resolve(argument)中有参数时,可以将参数传给.then()中的匿名函数
这里原理都是一样的,就是Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。且都会返回一个Promise实例,所以可以链式调用then方法,上一个的返回值,可以作为下一个的参数。