ES6-学习笔记-9

Promise

一、处识Promise

1、Promise是什么

2、Promise的基本用法

二、Promise的实例方法

1、then()

 3.then 方法返回的 Promise 对象的状态改变
      const p = new Promise((resolve, reject) => {
        // resolve();
        reject();
      });
      p.then(
        () => {
          // console.log('success');
        },
        () => {
          console.log('err');

          // 在 then 的回调函数中，return 后面的东西，会用 Promise 包装一下
          // return undefined;
          // 等价于
          // return new Promise(resolve => {
          //   resolve(undefined);
          // });

          return 123;
          // return new Promise(resolve => {
          //   resolve(123);
          // });

          // 默认返回的永远都是成功状态的 Promise 对象
          // return new Promise((resolve, reject) => {
          //   reject('reason');
          // });
        }
      )
        .then(
          data => {
            console.log('success2', data);

            // return undefined;
            return new Promise(resolve => {
              resolve(undefined);
            });
          },
          err => {
            console.log('err2', err);
          }
        )
        .then(
          data => {
            console.log('success3', data);
          },
          err => {
            console.log('err3', err);
          }
        );

2、catch()

3、finally()

三、Promise的构造函数方法

1、Promise.resolve()

 // 1.Promise.resolve()
      // 是成功状态 Promise 的一种简写形式
      // new Promise(resolve => resolve('foo'));
      // // 简写
      // Promise.resolve('foo');

      // 参数
      // 一般参数
      // Promise.resolve('foo').then(data => {
      //   console.log(data);
      // });

      // Promise
      // 当 Promise.resolve() 接收的是 Promise 对象时，直接返回这个 Promise 对象，什么都不做
      // const p1 = new Promise(resolve => {
      //   setTimeout(resolve, 1000, '我执行了');
      //   // setTimeout(() => {
      //   //   resolve('我执行了');
      //   // }, 1000);
      // });
      // Promise.resolve(p1).then(data => {
      //   console.log(data);
      // });
      // 等价于
      // p1.then(data => {
      //   console.log(data);
      // });
      // console.log(Promise.resolve(p1) === p1);

      // 当 resolve 函数接收的是 Promise 对象时，后面的 then 会根据传递的 Promise 对象的状态变化决定执行哪一个回调
      // new Promise(resolve => resolve(p1)).then(data => {
      //   console.log(data);
      // });

      // 具有 then 方法的对象
      // function func(obj) {
      //   obj.then(1, 2);
      // }
      // func({
      //   then(resolve, reject) {
      //     console.log(a, b);
      //   }
      // });

      // const thenable = {
      //   then(resolve, reject) {
      //     console.log('then');
      //     resolve('data');
      //     // reject('reason');
      //   }
      // };
      // Promise.resolve(thenable).then(
      //   data => console.log(data),
      //   err => console.log(err)
      // );
      // console.log(Promise.resolve(thenable));

2、Promise.reject()

// 2.Promise.reject()
      // 失败状态 Promise 的一种简写形式
      // new Promise((resolve, reject) => {
      //   reject('reason');
      // });
      // 等价于
      // Promise.reject('reason');

      // 参数
      // 不管什么参数，都会原封不动地向后传递，作为后续方法的参数
      // const p1 = new Promise(resolve => {
      //   setTimeout(resolve, 1000, '我执行了');
      // });
      // Promise.reject(p1).catch(err => console.log(err));

      new Promise((resolve, rejcet) => {
        resolve(123);
      })
        .then(data => {
          // return data;
          // return Promise.resolve(data);

          return Promise.reject('reason');
        })
        .then(data => {
          console.log(data);
        })
        .catch(err => console.log(err));

3、Promise.all()

 // 1.有什么用
      // Promise.all() 关注多个 Promise 对象的状态变化
      // 传入多个 Promise 实例，包装成一个新的 Promise 实例返回

      // 2.基本用法
      const delay = ms => {
        return new Promise(resolve => {
          setTimeout(resolve, ms);
        });
      };

      const p1 = delay(1000).then(() => {
        console.log('p1 完成了');

        // return 'p1';
        return Promise.reject('reason');
      });
      const p2 = delay(2000).then(() => {
        console.log('p2 完成了');

        return 'p2';
        // return Promise.reject('reason');
      });

      // Promise.all() 的状态变化与所有传入的 Promise 实例对象状态有关
      // 所有状态都变成 resolved，最终的状态才会变成 resolved
      // 只要有一个变成 rejected，最终的状态就变成 rejected

      const p = Promise.all([p1, p2]);
      p.then(
        data => {
          console.log(data);
        },
        err => {
          console.log(err);
        }
      );

4、Promise.race()

 // 1.Promise.race()
      // Promise.race() 的状态取决于第一个完成的 Promise 实例对象，如果第一个完成的成功了，那最终的就成功；如果第一个完成的失败了，那最终的就失败
      const racePromise = Promise.race([p1, p2]);
      racePromise.then(
        data => {
          console.log(data);
        },
        err => {
          console.log(err);
        }
      );

5、Promise.allSettled()

// 2.Promise.allSettled()
      // Promise.allSettled() 的状态与传入的Promise 状态无关
      // 永远都是成功的
      // 它只会忠实的记录下各个 Promise 的表现
      const allSettledPromise = Promise.allSettled([p1, p2]);
      allSettledPromise.then(data => {
        console.log('succ', data);
      });

四、Promise的注意事项和应用

 // 1.resolve 或 reject 函数执行后的代码
      // 推荐在调用 resolve 或 reject 函数的时候加上 return，不再执行它们后面的代码
      // new Promise((resolve, reject) => {
      //   // return resolve(123);
      //   return reject('reason');

      //   console.log('hi');
      // });

      // 2.Promise.all/race/allSettled 的参数问题
      // 参数如果不是 Promise 数组，会将不是 Promise 的数组元素转变成 Promise 对象
      // Promise.all([1, 2, 3]).then(datas => {
      //   console.log(datas);
      // });
      // 等价于
      // Promise.all([
      //   Promise.resolve(1),
      //   Promise.resolve(2),
      //   Promise.resolve(3)
      // ]).then(datas => {
      //   console.log(datas);
      // });

      // 不只是数组，任何可遍历的都可以作为参数
      // 数组、字符串、Set、Map、NodeList、arguments
      // Promise.all(new Set([1, 2, 3])).then(datas => {
      //   console.log(datas);
      // });

      // 3.Promise.all/race/allSettled 的错误处理
      const delay = ms => {
        return new Promise(resolve => {
          setTimeout(resolve, ms);
        });
      };

      const p1 = delay(1000).then(() => {
        console.log('p1 完成了');

        // return 'p1';
        return Promise.reject('reason');
      });
      // .catch(err => {
      //   console.log('p1', err);
      // });
      const p2 = delay(2000).then(() => {
        console.log('p2 完成了');

        return 'p2';
        // return Promise.reject('reason');
      });
      // // .catch(err => {
      // //   console.log('p2', err);
      // });

      const allPromise = Promise.all([p1, p2]);
      allPromise
        .then(datas => {
          console.log(datas);
        })
        .catch(err => console.log(err));

      // 错误既可以单独处理，也可以统一处理
      // 一旦被处理，就不会在其他地方再处理一遍

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Promise 的应用</title>
    <style>
      #img {
        width: 80%;
        padding: 10%;
      }
    </style>
  </head>
  <body>
    <img
      src="https://img.mukewang.com/5e6af63d00011da318720764.jpg"
      alt=""
      id="img"
    />

    <script>
      // 异步加载图片
      const loadImgAsync = url => {
        return new Promise((resolve, reject) => {
          const img = new Image();

          img.onload = () => {
            resolve(img);
          };

          img.onerror = () => {
            reject(new Error(`Could not load image at ${url}`));
          };

          img.src = url;
        });
      };

      const imgDOM = document.getElementById('img');
      loadImgAsync('https://2img.mukewang.com/5f057a6a0001f4f918720764.jpg')
        .then(img => {
          console.log(img.src);
          setTimeout(() => {
            imgDOM.src = img.src;
          }, 1000);
        })
        .catch(err => {
          console.log(err);
        });
    </script>
  </body>
</html>