美文网首页
《Promise》

《Promise》

作者: 大风车呀大风车 | 来源:发表于2020-10-20 18:03 被阅读0次

1、初识Promise

Promise 是异步操作的一种解决方案
Promise 一般用来解决层层嵌套的回调函数(回调地狱 callback hell)的问题

1.1、Promise的基本用法

实例化构造函数生成实例对象
Promise 的状态 :Promise 有 3 种状态,一开始是 pending(未完成),执行 resolve,变成 fulfilled(resolved),已成功
Promise 的状态一旦变化,就不会再改变了
resolve 和 reject 函数的参数

const p = new Promise((resolve, reject) => {
      reject(new Error('reason'));
    });
    p.then(
      data => {
        console.log('success', data);
      },
      err => {
        console.log('error', err);
      }
    );

    console.log(p);

2、 Promise的构造函数方法

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方法的对象

 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));

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));

Promise.all()关注多个 Promise 对象的状态变化,传入多个 Promise 实例,包装成一个新的 Promise 实例返回

Promise.all() 的状态变化与所有传入的 Promise 实例对象状态有关

所有状态都变成 resolved,最终的状态才会变成 resolved
只要有一个变成 rejected,最终的状态就变成 rejected
 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');
      });

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

Promise.race() Promise.race() 的状态取决于第一个完成的 Promise 实例对象,如果第一个完成的成功了,那最终的就成功;如果第一个完成的失败了,那最终的就失败

 const delay = ms => {
        return new Promise(resolve => {
          setTimeout(resolve, ms);
        });
      };
      const p1 = delay(1000).then(() => {
        console.log('p1 完成了');
        return 'p1';
      });
      const p2 = delay(2000).then(() => {
        console.log('p2 完成了');
        return Promise.reject('reason');
      });
  const racePromise = Promise.race([p1, p2]);
      racePromise.then(
        data => {
          console.log(data);
        },
        err => {
          console.log(err);
        }
      );

Promise.allSettled() 的状态与传入的Promise 状态无关,永远都是成功的,它只会忠实的记录下各个 Promise 的表现。

 const delay = ms => {
        return new Promise(resolve => {
          setTimeout(resolve, ms);
        });
      };
      const p1 = delay(1000).then(() => {
        console.log('p1 完成了');
        return 'p1';
      });
      const p2 = delay(2000).then(() => {
        console.log('p2 完成了');
        return Promise.reject('reason');
      });
 const allSettledPromise = Promise.allSettled([p1, p2]);
      allSettledPromise.then(data => {
        console.log('succ', data);
      });

3、Promise的实例方法

then方法
pending->fulfilled 时,执行 then 的第一个回调函数
pending->rejected 时,执行 then 的第二个回调函数
then 方法执行后默认是返回一个新的成功状态的Promise对象

 const p = new Promise((resolve, reject) => {
      reject();
    });
    p.then(
      () => {
        // console.log('success');
      },
      () => {
        console.log('err');
        // 在 then 的回调函数中,return 后面的东西,会用 Promise 包装一下
        return 123;
        // 等价于
        // return new Promise(resolve => {
        //   resolve(123);
        // });
      }
    )
      .then(
        data => {
          console.log('success2', data);
          return new Promise(resolve => {
            resolve(undefined);
          });
        },
        err => {
          console.log('err2', err);
        }
      )
      .then(
        data => {
          console.log('success3', data);
        },
        err => {
          console.log('err3', err);
        }
      );

catch方法,专门用来处理 rejected 状态,本质上是 then 的特例
catch() 可以捕获它前面的错误
一般总是建议,Promise 对象后面要跟 catch 方法,这样可以处理 Promise 内部发生的错误

new Promise((resolve, reject) => {
      reject('reason');
    })
      .then(data => {
        console.log(data);
      })
      .catch(err => {
        console.log(err);
        throw new Error('reason');
      })
      .then(data => {
        console.log(data);
      })
      .catch(err => {
        console.log(err);
      });

finally,本质上是 then() 的特例。
当 Promise 状态发生变化时,不论如何变化都会执行,不变化不执行

 new Promise((resolve, reject) => {
    // resolve(123);
    reject('reason');
     })
     .finally(data => {
  console.log(data);
   })
  .catch(err => {});

4、Promise的注意事项和应用

resolve 或 reject 函数执行后的代码
推荐在调用 resolve 或 reject 函数的时候加上 return,不再执行它们后面的代码
Promise.all/race/allSettled 的参数问题
参数如果不是 Promise 数组,会将不是 Promise 的数组元素转变成 Promise 对象
Promise.all/race/allSettled 的错误处理
错误既可以单独处理,也可以统一处理,一旦被处理,就不会在其他地方再处理一遍
异步加载图片

// 异步加载图片
      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);
        });

相关文章

网友评论

      本文标题:《Promise》

      本文链接:https://www.haomeiwen.com/subject/gaxvpktx.html