JavaScript Promise的一些知识点重要

原创

小哥 3年前 (2022-10-20) 阅读数 29 #js教程

文章标签 JavaScript Promise

前言

本文大部分出自阮易峰之手。ES6导论教程，原文链接在正文末尾。

本文是个人编写的简明版本。

什么是Promise

    Promise是一个对象，您可以从中获取用于异步操作的消息。 Promise提供统一的API，所有类型的异步操作都可以以相同的方式处理。

Promise的特点

物体的状态不受外界影响。 Promise有三个州， pending (正在进行中)， resolved (已完成，也称为fulfilled）和 rejected (失败)。只有异步操作的结果才能确定它当前处于哪种状态，其他任何操作都无法更改此状态。
状态一旦改变，就不会再改变，这个结果随时都可以得到。 Promise对象的状态只有两种可能的更改：From。 pending 变为 resolved 或者从 pending 变为 rejected 。只要这两种情况出现，状态就不会再次改变。

Promise问题已解决

Promise异步操作可以表示为同步操作的过程，避免了通常所知的嵌套回调函数层 回调地狱
Promise提供统一接口，使异步操作变得更容易。

Promise的缺点

无法取消Promise，一旦创建，将立即执行，不能中途取消。
如果不设置回调函数，Promise内部引发的错误不会反映到外部。
当处于 pending 状态，则不可能知道当前正在进行的是哪个状态。

基本用法

Promise该对象是一个构造函数，用于生成Promise实例。

下面的代码创建一个Promise实例

var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise接受一个函数作为参数，该参数的两个参数是。 resoleve 和 reject ，它们是两个功能。

resolve 该函数为Promise状态从 pending 变为 resolved ，当异步操作成功时调用，并将异步操作的结果作为参数传递。

reject 该函数为Promise状态从 pending 变为 reject ，在异步操作失败时调用，并将异步操作报告的错误作为参数传递。

Promise实例生成后，即可传递。 then 方法是单独指定的。 resolved 状态和 reject 状态回调函数。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then 方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象…的状态Resolved第二个回调函数在以下情况下调用Promise对象…的状态Reject什么时候打来的。其中第二功能是可选的并且不必提供。两个函数都接受Promise作为参数的对象的值。

then方法

then 该方法在Prototype对象中定义。Promise.prototypeON，它的作用是Promise该实例在状态更改时添加一个回调函数。

then 方法返回一个新的Promise实例，因此您可以使用链式编写，即E。 then 该方法之后是另一个调用。 then 方法。

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // ...
});

上面的代码使用 then 方法，该方法依次指定两个回调函数。在第一个回调函数完成后，返回的结果将作为参数传递给第二个回调函数。

catch方法

catch 方法实际上是 .then(null,rejection) 别名，指定发生错误时回调函数。

getJSON("/posts.json").then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 运行上一个回调函数时出错。
  console.log(出现错误！, error);
});

如果Promise国家已经变成了 Resolved 再次引发错误是无效的。

var promise = new Promise(function(resolve, reject) {
  resolve(ok);
  throw new Error(test);
});
promise
  .then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) });
// ok

Promise对象的错误是“冒泡的”，并被传递回来，直到它们被捕获。也就是说，错误永远是下一个错误。catch语句捕获。

一般来说，不是在 then 内部的方法定义 Reject 状态的回调函数(即： then 第二个参数)，始终使用 catch 方法。

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

在上面的代码中，第二种写入方法比第一种写入方法更好，因为第二种写入方法可以捕获先前的 then 方法执行中的错误也更接近于同步编写。 （try/catch） 。

跟传统的 try/catch 如果不使用代码块，则代码块会有所不同。 catch 方法指定用于错误处理的回调函数，Promise对象抛出的错误不会传递给外部代码，即。没有任何反应。

应该指出的是， catch 该方法返回一个Promise对象，因此您可以稍后调用它。 then 方法。

var someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面的行将报告错误，因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing()
.catch(function(error) {
  console.log(oh no, error);
})
.then(function() {
  console.log(carry on);
});
// oh no [ReferenceError: x is not defined]
// carry on

all方法

all 方法用于组合多个Promise实例，包装到一个新的Promise实例。

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

在上面的代码中， Promise.all 方法接受数组作为参数，p1、p2、p3都是Promise如果不是，对象的实例将首先调用以下代码 Promise.resolve 方法时，参数将被转换Promise举例说明，并作进一步处理。

p的状态由p1、p2、p3决定，分为两个案件。

只有p1、p2、p3…的状态 fulfilled ，p…的状态 fulfilled ，此时p1、p2、p3的返回值p回调函数。

-只要p1、p2、p3其中一位是 rejected ，p国家就变成了 rejected ，这个时候第一个就是reject传递实例的返回值。p回调函数。

race方法

race 该方法同样是将多个Promise实例，包装到一个新的Promise实例

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

在上面的代码中，只要p1、p2、p3其中一个实例是第一个改变状态的实例，p…的状态。带头改变的那个人 Promise 传递实例的返回值。p回调函数。

Promise.race该方法的参数是相同的Promise.all如果不是这样，方法也是一样的。 Promise 实例时，将首先调用以下代码。Promise.resolve方法时，参数将被转换 Promise 举例说明，并作进一步处理。

这里有一个例子，它将是Promise…的状态reject，否则就会变成resolve。

var p = Promise.race([
  fetch(/resource-that-may-take-a-while),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error(request timeout)), 5000)
  })
])
p.then(response => console.log(response))
p.catch(error => console.log(error))

在上面的代码中，如果5秒之内fetch方法无法返回结果，变量p…的状态 rejected ，从而触发 catch 方法指定回调函数。

resolve方法

有时需要转换现有对象Promise对象， resolve 该方法起到了这个作用。

resolve 相当于下面的文字

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

reject方法

reject 方法返回一个新的Promise实例，该实例的状态为 rejected 。其参数用法与 resolve 方法是相同的。

var p = Promise.reject(出错了);
// 等同于
var p = new Promise((resolve, reject) => reject(出错了))

p.then(null, function (s){
  console.log(s)
});
// 出错了

done方法

Promise对象的回调链，无论 then 方法或 catch 在方法的末尾，如果最后一个方法抛出错误，则可能不会捕获该错误(因为Promise内部错误不会蔓延到全球)。因此，我们可以提供一个 done 方法，以确保引发任何可能的错误。

asyncFunc()
  .then(f1)
  .catch(r1)
  .then(f2)
  .done();

它的实现代码相当简单。

Promise.prototype.done = function (onFulfilled, onRejected) {
  this.then(onFulfilled, onRejected)
    .catch(function (reason) {
      // 抛出全局错误
      setTimeout(() => { throw reason }, 0);
    });
};

从上面的代码可以看出， done 方法的使用可以是这样的。 then 该方法是以这种方式使用的，提供 Fulfilled 和 Rejected 状态的回调函数也可以不提供参数。但不管怎样， done 将捕获可能发生的任何错误并在全局范围内引发它们。

finally方法

finally 方法用于指定是否使用。Promise物体的最终状态是什么。它已关联 done 这两种方法最大的区别在于它接受一个普通的回调函数作为参数，无论状态如何，都必须执行该函数。

下面是服务器使用的一个示例。Promise处理请求，然后使用 finally 方法来关闭服务器。

server.listen(0)
  .then(function () {
    // run test
  })
  .finally(server.stop);

它的实现也很简单。

Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

应用：加载图片

我们可以把图片的加载写成一个整体。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;
  });
};