2022.06.10

Promise

类方法

1. Promise.resolve()：有时候我们已经有了现成的内容了，希望将它转成Promise来使用，这个时候我们就可以可以Promise.resolve(value)方法来完成，Promise.resolve()相当于new Promise，并且执行resolve操作。resolve方法的参数依旧有三种形态
   1. 普通值/对象
   2. Promise对象
   3. thenable对象 ```javascript // 转成Promise对象 // function foo() { // const obj = { name: “why” } // return new Promise((resolve) => { // resolve(obj) // }) // }

// foo().then(res => { // console.log(“res:”, res) // })

// 类方法Promise.resolve // 1.普通的值 // const promise = Promise.resolve({ name: “why” }) // 相当于 // const promise2 = new Promise((resolve, reject) => { // resolve({ name: “why” }) // })

// 2.传入Promise const promise = Promise.resolve(new Promise((resolve, reject) => { resolve(“11111”) }))

promise.then(res => { console.log(“res:”, res) })

// 3.传入thenable对象

2. `Promise.reject()`: 作用跟`resolve`一样，但是`reject`无论传入什么参数都是直接拒绝返回
```javascript
// const promise = Promise.reject("rejected message")
// 相当于
// const promise2 = new Promsie((resolve, reject) => {
//   reject("rejected message")
// })
// 注意: 无论传入什么值都是一样的
const promise = Promise.reject(new Promise(() => {}))
promise.then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
})

1. Promise.all()：传入一个promise数组（如果参数不是promise对象会自动转成Promise对象），等到所有子项的状态都变成fulfilled时，按照数组的顺序返回对应的结果，如果其中有一个意外中断（拒绝），马上返回这个拒绝的结果 ```javascript // 创建多个Promise const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve(11111) }, 1000); })

const p2 = new Promise((resolve, reject) => { setTimeout(() => { reject(22222) }, 2000); })

const p3 = new Promise((resolve, reject) => { setTimeout(() => { resolve(33333) }, 3000); })

// 需求: 所有的Promise都变成fulfilled时, 再拿到结果 // 意外: 在拿到所有结果之前, 有一个promise变成了rejected, 那么整个promise是rejected Promise.all([p2, p1, p3, “aaaa”]).then(res => { console.log(res) }).catch(err => { console.log(“err:”, err) })

4. `Promise.allSetted()`：传入一个promise数组（如果参数不是promise对象会自动转成Promise对象），等到所有子项都有结果时，会按照顺序返回对应的结果数组，结果数组里的子项是对象，会有子项的状态和结果值。
```javascript
// 创建多个Promise
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(11111)
  }, 1000);
})
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(22222)
  }, 2000);
})
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(33333)
  }, 3000);
})
// allSettled
Promise.allSettled([p1, p2, p3]).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

1. Promise.race：传入一个promise数组（如果参数不是promise对象会自动转成Promise对象），等到某一个子项有结果时，无论成功或者失败，都直接 return出结果 ```javascript // 创建多个Promise const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve(11111) }, 3000); })

const p2 = new Promise((resolve, reject) => { setTimeout(() => { reject(22222) }, 500); })

const p3 = new Promise((resolve, reject) => { setTimeout(() => { resolve(33333) }, 1000); })

// race: 竞技/竞赛 // 只要有一个Promise变成fulfilled状态, 那么就结束 // 意外: Promise.race([p1, p2, p3]).then(res => { console.log(“res:”, res) }).catch(err => { console.log(“err:”, err) })

6. `Promise.any`：传入一个promise数组（如果参数不是promise对象会自动转成Promise对象），等到某一个子项的状态变成`fulfilled`时，才会返回出结果。如果所有子项的结果都是`rejected`，那么会把所有的错误信息收集起来，返回一个报错。通过`.errors`可以看到
```javascript
// 创建多个Promise
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve(11111)
    reject(1111)
  }, 1000);
})
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(22222)
  }, 500);
})
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve(33333)
    reject(3333)
  }, 3000);
})
// any方法
Promise.any([p1, p2, p3]).then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err.errors)
})

Promise串行

const timeout = (ms) =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
const ajax1 = () =>
  timeout(3000).then(() => {
    console.log("1");
    return 1;
  });
const ajax2 = () =>
  timeout(1000).then(() => {
    console.log("2");
    return 2;
  });
const ajax3 = () =>
  timeout(2000).then(() => {
    console.log("3");
    return 3;
  });
const mergePromise = (ajaxArray) => {
  // 在这里实现你的代码
  // 初始化
    let initPromise = Promise.resolve();
    let result = [];
    return new Promise((resolve, reject) => {
        ajaxArray.reduce( (pre, cur) => {
            // 根据上一轮Promise的结果来决定当前的结果
            return pre.then(cur)
            .then((res) => {            // 用于输出最后的data[1,2,3]
                result.push(res);
            })
        }, initPromise)     // initPromise为初始化值
        .then(() => {          // ajaxArray遍历结束，resolve reuslt
            resolve(result);
        })
    })
};
// 每一轮都会产生一个promise结果
// 等到结束了，会resolve出一个result
mergePromise([ajax1, ajax2, ajax3]).then((data) => {
    console.log(data)
}); // data 为 [1, 2, 3]});
// 要求分别输出// 1// 2// 3// done// [1, 2, 3]

Promise红绿灯

// Promise红绿灯
const delay = (ms) => 
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        }, ms)
    })
function lighting(arr){
    arr.reduce(
        (pre, cur) => pre.then(cur).then((res) => console.log(res)), 
        Promise.resolve())
        .then(() => lighting(arr));
}
let arr = [
    () => delay(3000).then(() => 'red'),
    () => delay(2000).then(() => 'yellow'),
    () => delay(1000).then(() => 'green')
]
lighting(arr);

算法