Promise对象及相关实例方法介绍

文章目录

  • Promise 对象
    • 1.0 Promise 的含义
    • 2.0 基本用法
    • 3.0 Promise.prototype.then()
    • 4.0 Promise.prototype.catch()
    • 5.0 Promise.prototype.finally()
    • 6.0 Promise.all()
    • 7.0 Promise.race()
    • 8.0 Promise.resolve()
    • 9.0 Promise.rejected()
  • 总结:

Promise 对象

1.0 Promise 的含义

Promise 是一步编程的一种解决方案, 比传统的解决方案 — 回调函数和事件 — 更合理和更加强大.

所谓 Promise, 简单来说就是一个容器, 里面保存着某个未来才会结束的事件(通常是一个一步操作)的结果.

Promise 对象有以下两个特点.

  1. 对象的状态不受外界影响. Promise 对象代表一个一步操作, 有三种状态: pending , fulfilledrejected . 只有异步操作的结果, 可以决定当前是哪一种状态, 其他任何操作都无法改变这个状态.
  2. 一旦状态改变, 就不会再变, 任何时候都可以得到这个结果. Promise 对象的状态改变, 只有两种可能: 从 pending 变为 fulfilled 和从 pending变为rejected. 这要这两种情况发生, 状态就凝固了, 不会再改变了, 会一直保持这个结果, 这时就称为 resolved(已定性). 如果改变已经发生了, 你再对 promise 对象添加回调函数, 也会立即得到这个结果. 这与事件完全不同, 事件的特点就是, 如果你错过了它, 你再去监听,是得不到结果的.

有了 Promise 对象, 就可以将异步的操作 以 同步的流程表达出来., 避免了层层嵌套函数. 此外, Promise 对象提供统一的接口,使得控制异步操作更加容易.

Promise 也有一些缺点,:

  • 首先, 无法取消 Promise, 一旦新建它就会立即执行, 无法取消.
  • 其次, 如果不设置回调函数, Promise 内部抛出的错误, 不会反映到外部.
  • 第三, 当处于 pending 状态时, 无法得知目前进展到哪一个阶段(即: 无法得知是刚刚开始还是即将完成).

2.0 基本用法

ES6 规定, promise 对象是一个构造函数, 用来生成 Promise 实例.

下面代码创造了一个 Promise 实例

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

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

Promise 构造函数接收一个函数作为参数, 该函数的两个参数分别是 resolvereject. 它们是两个函数, 有JavaScript 引擎提供, 不用自己部署.

resolve 函数的作用是, 将 Promise 对象的状态从"未完成" 变为 “成功”(即从 pending 变为 resolved), 在异步操作成功时调用, 并将异步操作的结果, 作为参数传递出去.

reject 函数的作用是, 将 Promise 对象的状态从 “未完成” 变为 “失败” (即从 pending 变为 rejected), 在异步操作失败时调用, 并将异步操作爆出的错误, 作为参数传递出去.

Promise 实例生成以后, 可以用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数.

promise.then((value)=>{
    
    // success
},(error)=>{
    
    // failure
})

then 方法可以接收两个回调函数作为参数,:

  • 第一个回调函数是 Promise 对象的状态变为 resolved 时调用
  • 第二个回调函数是 Promise 对象的状态变为 rejected 时调用.

其中, 第二个函数是可选的, 不一定要提供. 这两个函数都接受 Promise 对象传出的值作为参数.

下面是一个 Promise 对象的简单例子.

function timeout(ms) {
    
  return new Promise((resolve, reject) => {
    
    setTimeout(resolve, ms, 'done'); // 把 'done' 结果传给 resolve 函数.
  });
}

timeout(100).then((value) => {
    
  console.log(value)

你可能感兴趣的:(ES6,es6,前端,javascript)