日志

ES6入门之Promise对象

 来源    2019-10-09    1  

1. Promise 的含义

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

1.1 什么是Promise

简单来说就是一个容器,里面保存着某个未来才会结束的事件(也就是异步操作)的结果。从语法上来讲,Promise是一个对象,从它可以获取异步操作的消息,它提供统一的API,各种异步操作都可以用同样的方法进行处理。

Promise有两个特点:

1.1.1、对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态、任何其他操作都无法改版这个状态。

1.1.2、一旦状态改版,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只存在两种可能:从 pending 变为 fulfilled 和 从 pending 变为 rejeced。只要这两种情况发生,状态就终止,不会再变了并一直保持这个结果。这时就称为 resolved(已定型)。如果改版已经发生了,即使再对Promise对象添加回调函数,也会立即得到这个结果。如果你错过了再想去监听,是得不到结果的。

1.1.3、有了Promise对象,就可以将异步操作以同步操作的流程显示出来,这样就避免了层层嵌套的回调函数。Promise对象提供统一的接口,使得控制异步操作更加容易。

1.1.4、Promise也有一些缺点,就是无法取消 Promise,一旦建立就会立即执行,无法中途取消。如果不设置回调函数,Promise内部抛出的错误不会反应到外部。另外如果处于 pending 状态时,是无法知道现在到了哪一个阶段。

2. 基本用法

Promise对象是一个构造函数,用来生成Promise实例

const promise = new Promise((reolve, reject) => {
    if (// 异步操作成功) {
        resolve(val)
    }else{
        reject(val)
    }
})

Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 和 reject。

resolve:,将Promise对象的状态从『未完成』变为『成功』(pending => resolved),在异步操作成功时调用,并将异步操作的结果作为参数传递出去。

reject:将Promise对象的状态从『未完成』变为『失败』(pending => rejected),在异步操作失败时调用,并将异步操作的结果作为参数传递出去。

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

promise.then((val) => {
    // success
},(err) => {
    // failure
})

then方法可以接受两个回调函数作为参数。(第二个函数可选,这两个函数都接受Promise对象传出的值作为参数)

1、第一个回调函数在Promise对象的状态变为『resolved』时调用。

2、第二个回调函数在Promise对象的状态变为『rejected』时调用。

实例:

function timeout(ms) {
    retrun new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done')
    })
}

timeout(100)
.then((v) => {
    console.log(v)
})

上面代码中,timeout方法返回一个Promise实例,表示一段时间以后才会发生的结果,过了 ms时间后,Promise状态变为『resolved』然后就会触发then方法绑定的回调函数。

Promise 建立后就会立即执行

let promise = new Promise((resolve, reject) => {
    console.log('Promise')
    resolve()
})

promise
.then(() => {
    console.log('resolved')
})

console.log('hh')

// Promise
// hh
// resolved

Promise建立后立即执行,首先输出 「Promise」然后执行promise 的then函数,然后首先执行同步任务 输出 hh 在执行 then方法的回调函数输出resolved

如果调用 resolve 函数和 reject 函数时带有参数,那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例,表示抛出的错误。resolve函数的参数除了正常的值以外,还有可能是一个Promise实例。resolve实在成功的时候调用,reject是在失败的时候调用。

const p1 = new Promise(function (resolve, reject) {
  // ...
});

const p2 = new Promise(function (resolve, reject) {
  // ...
  resolve(p1);
})

上述代码中:p1 和 p2都是Promise的实例,但是p2的 resolve方法将 p1作为参数,即一个异步操作的结果返回是另一个异步操作。

注意:p1的状态就会传递给p2,p1的状态决定了p2的状态。如果p1的状态是pending,那么p2的回调函数就会等待p1的状态改变;如果p1的状态已经是 resolved 或者 rejected,那么p2的回调函数会立即执行。

一般来说,调用resolve 或 reject以后,Promise的进程就就结束了,后续操作应该放到 then方法里,而不是直接写在 resolve 或 reject 的后面。另外最后在它们之前加上 return语句。

3. Promise.prototype.then()

Promise实例具有 then 方法,then方法是定义在原型对象 Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。then 的第一个参数是 resolved状态的回调函数,第二个参数是 rejected状态的回调函数。

then方法返回的是一个新的 Promise 实例,不是原来那个,因此可以使用链式写法。.then().then()

a().then((j) => {
    retrun j
}).then((i) => {
    console.log(i)
},(err)=>{
    console.log(err)
})

上面 第一个then方法指定的回调函数,返回的是另一个 Promise 对象。这时,第二个 then 方法指定的回调函数,就会等这个新的 Promise对象状态发生变化,如果变为 resolved,就调用第一个回调函数,如果状态变为 rejected,就调用第二个回调函数。

4. Promise.prototype.catch()

Promise.prototype.catch 方法是 .then(null, rejecton) 或 .then(undefined, rejection)的别名,用于指定发生错误时的回调函数。

a().then((p) => {
    // success
}).catch((err) => {
    console.log('err')
})

如果对象的状态变为 resolved, 则会调用 then 方法指定的回调函数 success,如果异步操作抛出错误,状态就会变为 rejected,就会调用 catch 方法指定的回调函数处理这个错误。如果 then 方法指定的回调函数,在运行中抛出错误,也会被catch 方法捕获。

另外reject方法的作用等同于抛出错误

如果 Promise状态已经变成 resolved,再抛出错误是无效的。因为状态一旦改版,就永远保持,不会再变了。 而且Promise的错误有『冒泡』的性质,会一直向后传递,直到被捕获位置,它的错误总会被下一个catch语句捕获

建议:Promise 对象后面要跟catch方法,这样可以处理 Promise 内部发生的错误。catch方法返回的还是一个 Promise 对象,因此后面还可以接着调用then方法。

注意: catch函数中的方法发生错误,如果后面没有别的catch 方法,那么错误将不会被捕获,如果 catch 后面 还有catch ,第二个catch将会捕获前一个catch方法抛出的错误。

5. Promise.prototype.finally()

finally 方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

以上,不管promise 最后的状态,都会执行 finally 方法指定的函数。

finally 方法的回调函数不接受任何参数,所以就无法知道之前Promise状态到底是 fulfilled 还是 rejected。所以在finally方法里面的操作,是与之前状态无关的而且不依赖于Promise的执行结果。

6. 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 实例。)

Promise.all 的状态有两种情况:

1、如果 p1 p2 p3的状态都变成了 fulfilled,p的状态才是fulfilled,这时候返回一个 p1 p2 p3返回值组成的数组,传递给 p 的回调函数。

2、如果 p1 p2 p3中任一一个被rejected,p 的状态就变成了 rejected,这时候返回的是第一个被 rejected 实例的返回值,传递给 p 的回调函数。

注意,如果作为参数的 Promise 实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()的catch方法。而是触发自己定义的catch方法。

7. Promise.race()

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

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

与 Promise.all 的区别就是 p1 p2 p3 中一个实例改变状态,那么 p 的状态就跟着改变了,返回值为最先返回那个Promise实例的返回值。

8. Promise.resolve()

将现有对象转为 Promise 对象。

1、如果参数是一个Promise 实例
那么将不做任何修改。
2、参数是一个 thenable对象(具有then方法的对象)
将这个对象转为Promise对象,然后立即执行 thenable对象的then方法
3、参数不是具有then方法的对象,或根本不是对象
返回一个新的Promise对象,状态为 resolved
4、不带任何参数
直接返回一个 resolved 状态的Promise对象

9. Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected。回调函数立即执行。

关注公众号 【小夭同学】

相关文章
es6入门4--promise详解
日志可以说每个前端开发者都无法避免解决异步问题,尤其是当处理了某个异步调用A后,又要紧接着处理其它逻辑,而最直观的做法就是通过回调函数(当然事件派发也可以)处理,比如: 请求A(function (请求响 ...
ES6入门四:对象字面量扩展与字符串模板字面量
日志简洁属性与简洁方法 计算属性名与[[prototype]] super对象(暂时保留解析) 模板字面量(模板字符串)  一.简洁属性与简洁方法 ES6中为了不断优化代码,减低代码的耦合度在语法上下了很 ...
Nodejs与ES6系列2:Promise对象
日志2.promise对象 js单线程异步执行的特性,因此在代码中充斥着回调函数.随着回调函数的增加,代码的可读性会愈来愈差,因此引入promise对象是不错的一种选择,可以避免层层回调函数.在ECMA6 ...
es6中的promise对象
日志     Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) . ...
ES6学习笔记--promise对象
日志Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和更强大.它由社区最早提出和实现,ES6将其写进了语言标准,统一了用法,原生提供了Promise对象. Promise对 ...
JavaScript ES6 Promise对象
日志说明 Node.js中,以异步(Async)回调著称,使用了异步,提高了程序的执行效率,但是,代码可读性较差的. 假如有几个异步操作,后一个操作需要前一个操作的执行完毕之后返回的数据才能执行下去,如果 ...
ES6入门八:Promise异步编程与模拟实现源码
日志Promise的基本使用入门: ——实例化promise对象与注册回调 ——宏任务与微任务的执行顺序 ——then方法的链式调用与抛出错误(throw new Error) ——链式调用的返回值与传值 ...
谈谈 ES6 的 Promise 对象
日志一个 Promise 对象可以理解为一次将要执行的操作(常常被用于异步操作),使用了 Promise 对象之后可以用一种链式调用的方式来组织代码,让代码更加直观.而且由于 Promise.all 这样 ...
ES6 Promise对象
日志ES6 Promise对象 ES6 规定 Promise对象是一个构造函数,用来生成 Promise实列, 如下代码: var promise = new Promise((resolve, reje ...
ES6 之 let和const命令 Symbol Promise对象
日志ECMAScript 6入门 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了. (2016年6月,发布了小幅修订的<ECMASc ...
ES6的promise对象应该这样用
日志     ES6修补了一位Js修真者诸多的遗憾.      曾几何时,我这个小白从js非阻塞特性的坑中爬出来,当我经历了一些回调丑陋的写法和优化的尝试之后,我深深觉得js对于多线程阻塞式的开发语言而言 ...
ES6的promise对象研究
日志ES6的promise对象研究 什么叫promise?      Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那 ...
ES6必知必会 (五)—— Promise 对象
日志Promise 对象 1.Promise对象是ES6对异步编程的一种解决方案,它有以下两个特点: Promise对象代表一个异步操作,它只有三种状态:Pending(进行中).Resolved(已完成 ...
ES6的Promise对象
日志http://es6.ruanyifeng.com/#docs/promise Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise ...
ES6入门之对象扩展
日志ES5对象(超类)原有: 属性:construct构造函数 方法: object.hasOwnProperty( propertyName ) //检测是否有一个本地的属性而不是继承的,返回boole ...
ES6中Promise对象个人理解
日志Promise是ES6原生提供的一个用来传递异步消息的对象.它减少了传统ajax金字塔回调,可以将异步操作以同步操作的流程表达出来使得代码维护和可读性方面好很多. Promise的状态: 既然是用来传 ...
ES6(十四)Promise 对象
日志Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Pro ...
ES6 Promise对象then方法链式调用
日志then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数.then()方法会返回一个新的Promise实例,所以then()方法后面可以继 ...
ES6 Promise对象(七)
日志一.Promise介绍1.Promise简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果2.Promise可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函 ...