es6 promise

1. 小明一件接着一件的做任务,干完一件才能做下一件任务;  任务如下: cost 表示用的时间, 单位ms, name表示任务名字. 用promise实现过程;

var arr = [{cost: 300, name: "任务A" },{cost: 400, name: "任务B" },{cost: 300, name: "任务c" },{cost: 500, name: "任务d" }]
 
var arr = [{cost: 300, name: "任务A" },{cost: 400, name: "任务B" },{cost: 300, name: "任务c" },{cost: 500, name: "任务d" }]
   
   function doJob(job){
     return new Promise((res,rej)=>{
       setTimeout(()=> {
        console.log(job.name + "干完了...");
        res( job.cost ); //这是将then中的回调推到微任务队列
       },job.cost)
     })
   }
   let p = null;
   for(let i = 0; i < arr.length; i++){
    //  第一次和其他的不一样, 得单独拿出来
     if(i == 0){
      p = doJob(arr[i]); //结果返回promise类型的对象
     }
     else{
       p = p.then(()=> doJob(arr[i])); //promise.then里的函数返回值, 也是一个promise类型的对象
     }
   }

2 如果小明同时做所有的任务

注意: all中的回调函数的参数, 顺序是按照promise的属性, 而不是按照谁先干完的顺序;

 1 var arr = [{ cost: 1000, name: "任务A" }, { cost: 400, name: "任务B" }, { cost: 300, name: "任务c" }, { cost: 500, name: "任务d" }]
 2 
 3     function doJob(job) {
 4       return new Promise((res, rej) => {
 5         setTimeout(() => {
 6           console.log(job.name + "干完了...");
 7           res(job.cost);
 8         }, job.cost)
 9       })
10     }
11 
12     var jobs = [];
13     for (let i = 0; i < arr.length; i++) {
14       jobs.push(doJob(arr[i]));
15     }
16     Promise.all(jobs).then(res => {
17       console.log("所有任务都做完了", res);//res是7行的参数组成的数组[1000, 400, 300, 500]
18 })

3. 小明最先做完的任务:

注意: race可以测出谁最先做完, 但是不妨碍后面的任务继续做.

 1     var arr = [{ cost: 1000, name: "任务A" }, { cost: 400, name: "任务B" }, { cost: 300, name: "任务c" }, { cost: 500, name: "任务d" }]
 2 
 3     function doJob(job) {
 4       return new Promise((res, rej) => {
 5         setTimeout(() => {
 6           console.log(job.name + "干完了...");
 7           res(job.name);
 8         }, job.cost)
 9       })
10     }
11 
12     var jobs = [];
13     for (let i = 0; i < arr.length; i++) {
14       jobs.push(doJob(arr[i]));
15     }
16 
17     Promise.race(jobs).then(res => {
18       console.log("有做完的了", res);
19     })
原文地址:https://www.cnblogs.com/dangdanghepingping/p/14348692.html