正文

理解并掌握Promise的用法

IP云
IP云V管理员/4 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前沿：

Promise在处理异步操作非常有用。项目中，与后端进行数据请求的时候经常要用到Promise。我们可以用promise + xhr进行ajax的封装。也可以使用基于promise封装的请求方法（fetch）或者类库 （axios）去跟服务器进行交互。当使用fethch或者axios的时候，常常 需要对数据请求方法进行二次封装。 这就要求我们能够理解并掌握promise的用法。

Promise知识要点：

1、首先区分Promise构造函数和promise对象的概念。

通过Promise构造函数创建promise对象。promise对象是Promise构造函数的一个实例。 

var promise1 = new Promise(function(resolve, reject) {

  setTimeout(resolve, 100, 'foo');

});

console.log(promise1);

// output: [object Promise]

2、promise对象

概念（有点生硬）： promise 对象是一个代理对象（代理一个值），被代理的值在promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象。换句话说，promise对象表示一个异步操作的最终状态（完成或失败），以及其返回的值。

2-1、promise的状态类型

a.  一个 p romise对象的 状态类型:

  • pending: 初始状态，既不是成功，也不是失败状态。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

b. promise对象状态改变时，调用的方法。

要点：pending 状态的 promise 对象可能触发fulfilled 状态并传递一个值给相应的状态处理方法，也可能触发失败状态（rejected）并传递失败信息给相应的状态处理方法。当其中任一种情况出现时，promise 对象的 then 方法绑定的处理方法（handlers ）就会被调用。then方法包含两个参数：onfulfilled 和 onrejected，它们都是 Function 类型。

当promise状态为fulfilled时，调用 then 的 onfulfilled 方法，当promise状态为rejected时，调用 then 的 onrejected 方法或者catch方法。

特别提示：

1、then方法 的 onrejected 处理方法和catch方法只是语法糖不同。其实是一个东西。

2-2. 如何进行链式操作

要点： Promise.prototype.then 和 Promise.prototype.catch 方法返回promise 对象， 并且将以回调的返回值来resolve。

1、即然then和catch方法调用后，返回一个新的promise对象（则可以进行链式调用了）。

2、新的promise对象初始状态为pedding，以回调函数的返回值来resolve（不是reject），则状态变为fulfilled。所以，再进行链式调用的时候是调用 then 的 onfulfilled 方法。（返回值为error或者回调抛出错误，状态会变为rejected？？？有待考究下。在不发生意外情况，暂且理解为状态只能变为fulfilled）

3、Promise 构造函数

要点：构造函数主要是用来包装还未支持promises的函数。promise构造函数传入一个带有 resolve 和 reject 两个参数的executor函数。executor函数。Promise构造函数执行时立即调用 executor 函数， resolve 和 reject 两个函数作为参数传递给 executor （executor 函数在Promise构造函数返回新建对象前被调用）。 resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）。executor 内部通常会执行一些异步操作，一旦完成，可以调用resolve函数来将promise状态改成fulfilled，或者在发生错误时将它的状态改为rejected。如果在executor函数中抛出一个错误，那么该promise 状态为rejected。executor函数的返回值被忽略。

4、promise对象的状态改变时机和值的传递

我的理解是，只要准确的把握promise的状态变化情况，就能运用好promise。

1、由Promise构造函数创建的promise对象，状态由Promise构造函数的executor函数去控制promise的状态。调用executor函数的resolve或reject方法，把值传递下去。

2、当进行链式操作的时候，新的promise对象的状态由上一个then或catch的回调函数去控制promise的状态。用回调函数返回值的形式，把值传递下去。

相关阅读

目录[+]