初步了解Promise

timger 发布于2019-08-26 10:11 / 3145人阅读

摘要：定义或的别名，用于指定发生错误时的回调函数。无法取消，一旦新建立即执行若不设置回调函数，则内部抛出的异常反应不到外部状态无法得知进展。

问题来了

Promise 有几种状态？
Promise 有什么优缺点？
Promise构造函数是同步还是异步执行，then呢？
Promise和setTimeout的区别？
如何实现 Promise.all？
如何实现 Promise.finally？

Promise知识点 1. Promise

1）定义
保存着某个未来才会结束的事件（异步操作）的容器

2）特点
（1）对象的状态不受外界影响。三个状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前状态。
（2）状态只能改变一次，任何时候都能得到该结果。两种状态改变的情况：pending->fulfilled、pending->rejected。状态一直保持，给Promise对象添加回调函数，能得到该结果。

3）优缺点
（1）可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数；Promise对象提供统一的接口，是的控制异常操作更加容易。
（2）无法取消Promise，一旦新建立即执行；若不设置回调函数，则Promise内部抛出的异常反应不到外部；pending状态无法得知进展。

2. Promise.prototype.then()

1）定义
为Promise实例添加状态改变时的回调函数。.then(resolved的回调函数，rejected的回调函数[可选])

tips:
then方法返回的是一个新的Promise实例（不是原来的那个Promise实例），因此可以链式，如：.then().then()。
采用链式的then，可以指定一组按照次序执行的回调函数。

3. Promise.prototype.catch()

1）定义
then(null, rehection)或.then(undefiend, rejection)的别名，用于指定发生错误时的回调函数。

tips:
promise对象的错误具有“冒泡”性质，错误一直向后传递，直至被捕获。
promise对象错误不会传递到外层代码，即不同于try/catch，（报错后不会终止外层代码执行）。

4. Promise.prototype.finally()

1）定义
不论Promise对象最终状态如何，都会执行的操作（ES2018）。本质上是then方法的特例。
2）特点
不接受任何参数，不影响原Promise的状态。
3）实际应用
post请求loading，在请求结束后不论结果如何都关闭loading

5. Promise.all()

作用：
将多个Promise实例，包装成一个Promise实例。

特点：
新Promise对象(p)的状态由Promise实例数组（[p1, p2, p3]）决定。
当p1、 p2、 p3状态都为fulfilled，p的状态为fulfilled，p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
当p1、 p2、 p3中有一个状态为rejected，p的状态为rejected，第一个被reject的实例的返回值，会传递给p的回调函数。

问题解答 1. Promise有几种状态

pending（进行中）、fulfilled（已成功）和rejected（已失败）

2. Promise有什么优缺点

可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数；Promise对象提供统一的接口，是的控制异常操作更加容易。
无法取消Promise，一旦新建立即执行；若不设置回调函数，则Promise内部抛出的异常反应不到外部；pending状态无法得知进展。

3. Promise构造函数是同步还是异步执行，then呢？

构造函数同步执行，then异步执行

4. Promise和setTimeout的区别

setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.then()在本轮“事件循环”结束时执行。

5.如何实现 Promise.all

function promiseAll(promises) {
  return new Promise((resolve, reject) => {
    let resultCount = 0;
    let results = new Array(promises.length);

    for (let i = 0; i < promises.length; i++) {
      promises[i].then(value => {
                resultCount++;
        results[i] = value;
        if (resultCount === promises.length) {
          return resolve(results)
        }
      }, error => {
        reject(error)
      })
    }
  })
}

let p1 = new Promise(resolve => resolve("p1"))
let p2 = new Promise(resolve => resolve("p2"))
let p3 = Promise.reject("p3 error")

Promise.all([p1, p2, p3]).then(results => {
  console.log(results)
}).catch(error => {
  console.log(error)      // "p3 error"
})

promiseAll([p1, p2]).then(results => {
  console.log(results)    // ["p1", "p2"]
}).catch(error => {
  console.log(error)
})

6.如何实现 Promise.finally

Promise.prototype.finally = function (callback) {
  let P = this.constructor; // 构造函数
  console.log(P);
  return this.then(
    value  => P.resolve(callback()).then(() => value),  // resolve
    reason => P.resolve(callback()).then(() => { throw reason })  // reject
  );
};

参考文章

《ECMAScript 6 入门——阮一峰》

云服务器 GPU云服务器人工智能初步 hadoop初步学习计算机的初步学习 promise

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105737.html

js处理异步函数：从callback到promise

摘要：在处理异步回调函数的情况有着越来越值得推崇的方法及类库，下面会依次介绍处理异步函数的发展史，及源码解读。而对象的状态，是由第一个的参数成功回调函数或失败回调函数的返回值决定的。函数的执行分为同步和异步两种。同步即为同步连续执行，通俗点讲就是做完一件事，再去做另一件事。异步即为先做一件事，中间可以去做其他事情，稍后再回来做第一件事情。同时还要记住两个特性：1.异步函数是没有返回值的...

dance 2019-08-22 15:34 评论0 收藏0
js的事件循环

摘要：但是事件循环一般会在主线程中任务执行完成之后执行。所以，上面函数的调用栈过程如下总结的事件循环部分，内容应该算是全部阐述完全了。前言还记得那些年面试官问你的定时器的原理吗？还有呢？Promise的原理呢？原理、原理、原理，问的我们怀疑人生。为了下次不再懵逼，今天，我们来了解一下Event Loop的概念。我们的初衷是真正的了解和掌握它，了解整体JavaScript的运行机制。至少...

android_c 2019-08-22 11:06 评论0 收藏0
关于vue、vuex的一些初步小结

摘要：只能是同步函数，原因是无法捕捉异步函数的快照。除了这三个概念外，还有类比计算属性，用于从派生出一些值分割较大的状态树，便于管理。处理表单可手动监听或是使用带的双向绑定计算属性。一、Vue组件的创建一般语法： Vue.component(tagName, options) 务必在根组件实例化之前注册组件组件options说明： data: 必须是一个函数，目的在于返回独立的对象...

joywek 2019-08-21 17:55 评论0 收藏0
微信小程序踩坑系列——从wx.request谈谈异步处理

摘要：其实我们在同步流程中才说返回，异步没有返回这个概念或者说异步返回是没有意义的，异步对应的是回调，也就是说，对于一个异步函数，我们应该传入一个回调函数来接收结果。原文链接：https://www.xksblog.top/talk-... 见到wx.request的第一眼，就让我想起了$.ajax这东西，使用起来确实有很多不方便，不能忍，幸好小程序是支持ES6语法的，所以可以使用pro...

RdouTyping 2019-08-23 12:09 评论0 收藏0
深入 Promise

摘要：首先从这个构造函数说起，它是全局对象的属性的值，这也就是为什么浏览器环境下我们能直接调用它的原因，就像这些构造函数一样。的产生就是像正常使用构造函数那样构建一个，不过传给构造函数是内部自动创建的，作用是把记录到中。 showImg(https://segmentfault.com/img/bVbgYy2?w=1200&h=600); > new Promise((resolve, re...

cfanr 2019-08-23 11:58 评论0 收藏0