all的用法
Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的runAsync1、runAsync2、runAsync3这三个函数，看下面的例子：
function runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务1执行完成'); resolve('随便什么数据1'); }, 1000); }); return p; } function runAsync2(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务2执行完成'); resolve('随便什么数据2'); }, 2000); }); return p; } function runAsync3(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务3执行完成'); resolve('随便什么数据3'); }, 2000); }); return p; }
Promise.all([runAsync1(), runAsync2(), runAsync3()]) .then(function(results){ console.log(results); });
// 输出
异步任务1执行完成
异步任务2执行完成
异步任务3执行完成
["随便什么数据1", "随便什么数据2", "随便什么数据3"]
race的用法
all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法，这个词本来就是赛跑的意思。race的用法与all一样，我们把上面runAsync1的延时改为1秒来看一下：
function runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 console.log('异步任务1执行完成'); resolve('随便什么数据1'); }); return p; } function runAsync2(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务2执行完成'); resolve('随便什么数据2'); }, 2000); }); return p; } function runAsync3(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务3执行完成'); resolve('随便什么数据3'); }, 2000); }); return p; } Promise. race ([runAsync1(), runAsync2(), runAsync3()]) .then(function(results){ console.log(results); });
异步任务1执行完成
VM1213:33 111111 "随便什么数据1"
Promise {<resolved>: undefined}
VM1213:14 异步任务2执行完成
VM1213:24 异步任务3执行完成
promise.all 用法测试
<!-- promise.all 用法 多操作依次执行完执行下一次操作 Promise.all(promise1,promise2,promise3).then(()=>{}).catch(()=>{}) --> <template> <div> </div> </template> <script> export default { data () { return { dataList: [{}, {}] } }, components: {}, methods: { test () { const promiseList = this.dataList.map((item) => { return this.executePromise(item.origin, options, { fileName: item.file, action: 'upload' }) }) // 使用Primise.all来执行promiseList Promise.all(promiseList).then(async (res) => { if (res.length > 0) { res.forEach((item, index) => { this.fileInfoArray.push({ fileName: this.dataList[index].file || '', filePath: item.data.url || '' }) }) console.debug(res) if (await this.requestFeedbackUrl()) { this.$message('反馈成功！感谢您的建议。', 'success') } else { this.$message('提交失败！请重试。', 'error') } } }).catch((error) => { console.error(error) this.fileInfoArray = [] }) }, // 单独的promise async executePromise (url, options, info) { return new Promise((resolve, reject) => { const task = this.upload(url, options, info) //处理自己的业务 if (task) { const emitter = task.getEmitter() emitter.on('progress', function (p) { }) emitter.on('success', function (success) { resolve(success) }) emitter.on('error', function (err) { reject(err) }) } else { reject(new Error('Task Init Error')) } }) }, //执行相关逻辑 upload () { }, //请求接口 requestFeedbackUrl () { }, } } </script> <style lang="less" scoped> </style>
交流
我是老礼，公众号「进军全栈攻城狮」作者 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！
