前端工程師零基礎到就業（視頻代碼齊）階段二

時間 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>