前端工程师零基础到就业（视频代码齐）阶段二

时间 2021-08-12

标签 javascript 前端 java 数组前端工程师异步 ide 函数组件化 url 栏目 JavaScript 繁體版

原文原文链接

前端工程师零基础到就业（视频代码齐）阶段一
前端工程师-01-02-阶段二：组件化与移动WebApp开发-第1篇

Promise-初识 Promise
学什么：javascript

1） Promise 的实例方法前端

（视频资源vx（cmL46679910））
2）Promise 的构造函数方法java

3） Promise 的注意事项和应用数组

Promise 是什么：
Promise 的基本用法
then()前端工程师

Promise 的实例方法
catch()异步

<body>
    <script>
      // 1.有什么用
      // then(
      //   data => {},
      //   err => {}
      // );
      // then(data => {});

      // catch 专门用来处理 rejected 状态
      // catch 本质上是 then 的特例
      // then(null, err => {});

      // 2.基本用法
      new Promise((resolve, reject) => {
        // resolve(123);
        reject('reason');
      })
        .then(data => {
          console.log(data);
        })
        // .then(null, err => {
        //   console.log(err);
        // });
        .catch(err => {
          console.log(err);

          // return undefined;
          throw new Error('reason');
        })
        .then(data => {
          console.log(data);
        })
        .catch(err => {
          console.log(err);
        });

      // catch() 能够捕获它前面的错误
      // 通常老是建议，Promise 对象后面要跟 catch 方法，这样能够处理 Promise 内部发生的错误
    </script>
  </body>

finally()ide

<body>
    <script>
      // 1.何时执行
      // 当 Promise 状态发生变化时，不论如何变化都会执行，不变化不执行
      // new Promise((resolve, reject) => {
      //   // resolve(123);
      //   reject('reason');
      // })
      //   .finally(data => {
      //     console.log(data);
      //   })
      //   .catch(err => {});

      // 2.本质
      // finally() 本质上是 then() 的特例

      // new Promise((resolve, reject) => {
      //   // resolve(123);
      //   reject('reason');
      // })
      //   .finally(data => {
      //     console.log(data);
      //   })
      //   .catch(err => {});
      // 等同于
      new Promise((resolve, reject) => {
        // resolve(123);
        reject('reason');
      })
        .then(
          result => {
            return result;
          },
          err => {
            return new Promise((resolve, reject) => {
              reject(err);
            });
          }
        )
        .then(data => {
          console.log(data);
        })
        .catch(err => {
          console.log(err);
        });
    </script>
  </body>

Promise.resolve()函数

Promise 的构（视频资源vx（cmL46679910））造函数方法组件化

Promise.reject()url

Promise.all()

<body>
    <script>
      // 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);
        }
      );
    </script>

Promise.race()

Promise.allSettled()

Promise 的注意事项

Promise 的注意（视频资源vx（cmL46679910））事项和应用

三、Promise 的注意事项和应用

resolve 或 reject 执行后的代码

<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>
Promise.all/race/allSettled 的参数问题
Promise.all/race/allSettled 的错误处理
<body>
    <script>
      // 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));

      // 错误既能够单独处理，也能够统一处理
      // 一旦被处理，就不会在其余地方再处理一遍
    </script>