博客

Promise 笔记

  • Post author:
  • Post category:其他




Promise



含义

异步编程的一种解决方案，比传统的解决方案【回调函数和事件】更合理。

Promise对象两个特点

  • 对象不受外界影响。 共有三个状态

    pending

    ，

    fulfilled

    ，

    rejected

    。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。即：一旦发生无法改变
  • 一旦状态改变，就不会再变，任何时候都可以得到这个结果。

    Promise

    对象的状态改变，只有两种可能：

    pending

    =>

    fulfilled

    或者

    pending

    =>

    rejected

    ,这两个过程一旦发生，状态立刻凝固，不会再变，这时就称为

    resolved

    （已定型）


Promise

也有一些缺点：

  • 无法取消

    Promise

    ，一旦新建它就会立即执行，无法中途取消。
  • 如果不设置回调函数，

    Promise

    内部抛出的错误，不会反应到外部
  • 当处于

    pending

    状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。



Promise.resolve()

作用：将现有对象转为 Promise 对象 

const jsPromise = Promise.resolve($.ajax('/whatever.json'));

上面代码将 jQuery 生成的

deferred

对象，转为一个新的 Promise 对象。 

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))



Promise.resolve

方法的参数分成四种情况

  • 参数是一个 Promise 实例

    • 如果参数是 Promise 实例，那么

      Promise.resolve

      将不做任何修改、原封不动地返回这个实例。

  • 参数是一个

    thenable

    对象


    • thenable

      对象指的是具有

      then

      方法的对象，比如下面这个对象。 

    • let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};


    • Promise.resolve

      方法会将这个对象转为 Promise 对象，然后就立即执行

      thenable

      对象的

      then

      方法。 

    • let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});

      上面代码中，

      thenable

      对象的

      then

      方法执行后，对象

      p1

      的状态就变为

      resolved

      ，从而立即执行最后那个

      then

      方法指定的回调函数，输出 42。

  • 参数不是具有

    then

    方法的对象，或根本就不是对象

    • 如果参数是一个原始值，或者是一个不具有

      then

      方法的对象，则

      Promise.resolve

      方法返回一个新的 Promise 对象，状态为

      resolved

      。 

    • const p = Promise.resolve('Hello');
p.then(function (s){
  console.log(s)
});
// Hello

      上面代码生成一个新的 Promise 对象的实例

      p

      。由于字符串

      Hello

      不属于异步操作（判断方法是字符串对象不具有 then 方法），返回 Promise 实例的状态从一生成就是

      resolved

      ，所以回调函数会立即执行。

      Promise.resolve

      方法的参数，会同时传给回调函数。

  • 不带有任何参数


    • Promise.resolve()

      方法允许调用时不带参数，直接返回一个

      resolved

      状态的 Promise 对象。 

    • const p = Promise.resolve();
p.then(function () {
  // ...
});



Promise.reject()


Promise.reject(reason)

方法也会返回一个新的 Promise 实例，该实例的状态为

rejected

。 

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))
p.then(null, function (s) {
  console.log(s)
});
// 出错了

上面代码生成一个 Promise 对象的实例

p

，状态为

rejected

，回调函数会立即执行。



应用

我们可以将图片的加载写成一个

Promise

，一旦加载完成，

Promise

的状态就发生变化。 

const preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = path;
  });
};


Generator 函数与 Promise 的结合

使用 Generator 函数管理流程，遇到异步操作的时候，通常返回一个

Promise

对象。 

function getFoo () {
  return new Promise(function (resolve, reject){
    resolve('foo');
  });
}
const g = function* () {
  try {
    const foo = yield getFoo();
    console.log(foo);
  } catch (e) {
    console.log(e);
  }
};
function run (generator) {
  const it = generator();
  function go(result) {
    if (result.done) return result.value;
    return result.value.then(function (value) {
      return go(it.next(value));
    }, function (error) {
      return go(it.throw(error));
    });
  }
  go(it.next());
}
run(g);

上面代码的 Generator 函数

g

之中，有一个异步操作

getFoo

，它返回的就是一个

Promise

对象。函数

run

用来处理这个

Promise

对象，并调用下一个

next

方法。



Promise.try()

实际开发中，经常遇到一种情况：不知道或者不想区分，函数

f

是同步函数还是异步操作，但是想用 Promise 来处理它。因为这样就可以不管

f

是否包含异步操作，都用

then

方法指定下一步流程，用

catch

方法处理

f

抛出的错误。一般就会采用下面的写法。 

Promise.resolve().then(f)

上面的写法有一个缺点，就是如果

f

是同步函数，那么它会在本轮事件循环的末尾执行 

const f = () => console.log('now');
Promise.resolve().then(f);
console.log('next');
// next
// now

上面代码中，函数

f

是同步的，但是用 Promise 包装了以后，就变成异步执行了

有没有一种方法，让同步函数同步执行，异步函数异步执行，并且让它们具有统一的 API 呢？回答是可以的，并且还有两种写法。

  • 第一种写法是用

    async

    函数来写 

  • const f = () => console.log('now');
(async () => f())();
console.log('next');
// now
// next

    上面代码中，第二行是一个立即执行的匿名函数，会立即执行里面的

    async

    函数，因此如果

    f

    是同步的，就会得到同步的结果；如果

    f

    是异步的，就可以用

    then

    指定下一步，就像下面的写法。 

    (async () => f())()
.then(...)

    需要注意的是，

    async () => f()

    会吃掉

    f()

    抛出的错误。所以，如果想捕获错误，要使用

    promise.catch

    方法。 

    (async () => f())()
.then(...)
.catch(...)

  • 第二种写法是使用

    new Promise()
     

  • const f = () => console.log('now');
(
  () => new Promise(
    resolve => resolve(f())
  )
)();
console.log('next');
// now
// next

    上面代码也是使用立即执行的匿名函数，执行

    new Promise()

    。这种情况下，同步函数也是同步执行的。

  • 鉴于这是一个很常见的需求，提供

    Promise.try

    方法替代上面的写法。 

    const f = () => console.log('now');
Promise.try(f);
console.log('next');
// now
// next

    事实上，

    Promise.try

    就是模拟

    try

    代码块，就像

    promise.catch

    模拟的是

    catch

    代码块



Promise.all()


Promise.all()

方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。 

const p = Promise.all([p1, p2, p3]);

上面代码中，

Promise.all()

方法接受一个数组作为参数，

p1

、

p2

、

p3

都是 Promise 实例，如果不是，就会先调用下面讲到的

Promise.resolve

方法，将参数转为 Promise 实例，再进一步处理。另外，

Promise.all()

方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

当

p1,p2,p3

所有状态都变为

fulfilled

则 p状态变为

fulfilled

，只要有一个状态变为

rejected

，p

的状态就变成

rejected



Promise.race()


Promise.race()

方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。 

const p = Promise.race([p1, p2, p3]);

上面代码中，只要

p1

、

p2

、

p3

之中有一个实例率先改变状态，

p

的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给

p

的回调函数。


Promise.race()

方法的参数与

Promise.all()

方法一样，如果不是 Promise 实例，就会先调用下面讲到的

Promise.resolve()

方法，将参数转为 Promise 实例，再进一步处理。



Promise.allSettled()


Promise.allSettled()

方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果，不管是

fulfilled

还是

rejected

，包装实例才会结束。 

const promises = [
  fetch('/api-1'),
  fetch('/api-2'),
  fetch('/api-3'),
];
await Promise.allSettled(promises);
removeLoadingIndicator();

上面代码对服务器发出三个请求，等到三个请求都结束，不管请求成功还是失败，加载的滚动图标就会消失。

该方法返回的新的 Promise 实例，一旦结束，状态总是

fulfilled

，不会变成

rejected

。状态变成

fulfilled

后，Promise 的监听函数接收到的参数是一个数组，每个成员对应一个传入

Promise.allSettled()

的 Promise 实例。 

const resolved = Promise.resolve(42);
const rejected = Promise.reject(-1);
const allSettledPromise = Promise.allSettled([resolved, rejected]);
allSettledPromise.then(function (results) {
  console.log(results);
});
// [
//    { status: 'fulfilled', value: 42 },
//    { status: 'rejected', reason: -1 }
// ]

上面代码中，

Promise.allSettled()

的返回值

allSettledPromise

，状态只可能变成

fulfilled

。它的监听函数接收到的参数是数组

results

。该数组的每个成员都是一个对象，对应传入

Promise.allSettled()

的两个 Promise 实例。每个对象都有

status

属性，该属性的值只可能是字符串

fulfilled

或字符串

rejected

。

fulfilled

时，对象有

value

属性，

rejected

时有

reason

属性，对应两种状态的返回值。 

const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ];
const results = await Promise.allSettled(promises);
// 过滤出成功的请求
const successfulPromises = results.filter(p => p.status === 'fulfilled');
// 过滤出失败的请求，并输出原因
const errors = results
  .filter(p => p.status === 'rejected')
  .map(p => p.reason);

有时候，我们不关心异步操作的结果，只关心这些操作有没有结束。这时，

Promise.allSettled()

方法就很有用。如果没有这个方法，想要确保所有操作都结束，就很麻烦。

Promise.all()

方法无法做到这一点。



Promise.any()


Promise.any()

方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只要参数实例有一个变成

fulfilled

状态，包装实例就会变成

fulfilled

状态；如果所有参数实例都变成

rejected

状态，包装实例就会变成

rejected

状态。


Promise.any()

跟

Promise.race()

方法很像，只有一点不同，就是不会因为某个 Promise 变成

rejected

状态而结束。


版权声明：本文为first_helloword原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。