直接贴代码了,具体自己去控制台感受吧!可以直接复制第3个的里面包含了全部的测试代码,自己建立个html文件,打开控制台查看!
使用场景1
每一个结果,都需要依赖于另外一个结果
以下代码测试,第一个直接foo,然后foo传入第二个,第二个等待2秒后加2,第三个等待第二个完成后3秒后+3,最后合并输出结果
Promise.resolve('foo') .then(string=> { return new Promise(function(resolve, reject) { setTimeout(function() { string += '2'; resolve(string); }, 2000); }); }) .then(string=>{ setTimeout(function() { string += '3'; console.log(string); }, 3000) return string; }) .then(string=> { console.log(string); });
使用场景2
每个场景都是独立的,但是需要执行完成,才去执行另外的
这个的话就是最后会直接输出数组 ["s1", "s2"] ,分别是第一个和第二个的结果
vue 中使用
methods: { c1() { return new Promise((resolve, reject) => { resolve('s1') }) }, c2() { return new Promise((resolve, reject) => { resolve('s2') }) }, c3(){ Promise.all([this.c1, this.c2]).then(res => { console.log(res) }) } }
3、js示例,自行控制台打印即可
Promise.resolve('foo') .then(string => { return new Promise(function(resolve, reject) { setTimeout(function() { string += '2'; resolve(string); }, 2000); }); }) .then(string => { setTimeout(function() { string += '3'; console.log(string); }, 3000) return string; }) .then(string => { console.log(string); }); let p1 = new Promise((resolve, reject) => { resolve('第一个成功') }) let p2 = new Promise((resolve, reject) => { resolve('第二个成功') }) let p3 = new Promise((resolve, reject) => { reject('第三个失败') }) // 场景1 Promise.all([p1, p2]).then((result) => { console.log(result) //['成功了', 'success'] }).catch((error) => { console.log(error) }) // 场景2,如果失败,则会直接进入catah Promise.all([p1, p2, p3]).then((result) => { console.log(result) //['成功了', 'success'] }).catch((error) => { console.log(error) })