【个人向整理】Promise

2bdenny 发布于2019-08-26 12:02 / 3196人阅读

摘要：方法而对象本身，有一些方法查看的原型，发现它内置有几个方法参数处理成功的函数，处理错误的函数返回值返回一个对象，所以可以链式调用。参数返回值的参数应该是函数，传入非函数则会发生值穿透。

前言

网上关于Promise的文章确实是非常多了，但是自己实践的并不多，这里是针对自己的一个知识点小结和梳理，当然啦如果有错误欢迎提出^_^。

初定义

定义：Promise对象用于一个异步操作的最终完成/失败及其结果值的表示。
使用原因：避免回调嵌套层次过多。
拥有状态：

pending：初始/未定状态，初始化Promise时，调用executor函数后的状态。

fulfilled：成功状态。

rejected：失败状态。

状态转化：

pending -> fulfilled：操作成功

pending -> rejected：操作失败

状态转化是单向的，不可逆转。

最基本用法：
可以看到创建一个Promise实例，传入的参数是一个函数，这个函数称为executor/执行器。

new Promise((resolve, reject) => {
    if (success) {
        resolve(a) // pending to resolved
    } else {
        reject(err) // pending to rejectd
    }
})

方法

而Promise对象本身，有一些方法：

race()

reject()

resolve()

all()

查看Promise的原型，发现它内置有几个方法：

catch()

finally()

then()

Promise.prototype.then()

参数：处理成功的函数，处理错误的函数

返回值：返回一个Promise对象，所以可以链式调用。

promise.then(
    () => { console.log("我是成功后被执行的") },
    () => { console.log("我是失败后被执行的") })

Promise.prototype.catch()

参数：捕捉的错误/reject()传来的参数

返回值：返回一个Promise对象，所以可以链式调用。

Promise和then()中抛出错误能够不断传递，就能够在下一个catch()中统一处理，所以一般省略then中的第二个失败执行的函数。

promise.then(
    () => { console.log("我是成功后被执行的") }
).catch(
    (err) => { console.log(err) })

使用rejects()方法改变状态和抛出错误 throw new Error() 的作用是相同的

Promise.all()

参数：可迭代参数，如：数组。

用途：处理一些并发的异步操作，需要保证每个都执行完毕。

结果：状态全为fulfilled->fulfilled，否则->rejected。

Promise.race()

参数：可迭代参数，如：数组。

用途：处理一些并发的异步操作，只需要其中一个执行完毕。

结果：所有异步操作中有一个状态先改变，就采纳那个最先改变的状态为结果。

Promise.resolve()

参数：普通值、Promise对象、带有then的对象。

结果：一般情况返回一个状态为fulfilled的Promise对象。解析发生错误则返回rejected的Promise对象。

Promise.resolve("success")
// 其中[[PromiseStatus]]:"resolved"

Promise.reject("fail") 
// 其中[[PromiseStatus]]:"rejected"

Promise.resolve(Promise.reject("fail"))
// 其中[[PromiseStatus]]:"rejected"

由这个例子可以看出浏览器认为resolved和fulfilled是等价的，但Promise.resolve() 不一定让promise最终是fulfilled。所以对于resolved本身和fulfilled的区别，可以理解为resolved等价于compiled，即可能是成功也可能是失败。

Promise.reject()

参数：发生异常的原因。

结果：返回一个rejected状态的Promise对象。

注意点 状态变化

Promise状态只会改变一次。

构造函数中的resolve()/reject()只有第一次执行有效，多次调用没有作用。

Promise状态改变，并且传递了一个值，后续调用.then()/.catch()都可直接拿到该值。

参数/返回值

.then()/.catch()的参数应该是函数，传入非函数则会发生值穿透。

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)  //1

.then()/.catch()不能返回Promise本身，会造成死循环。

.then()/.catch()中return一个error对象并不会抛出错误，所以无法捕捉。

因为返回任意一个非Promise 的值都会被包裹成Promise对象，即 return new Error("error!!!")等价于return Promise.resolve(new Error("error!!!"))

执行顺序

Promise构造函数是同步执行的，resolve()/reject()后的代码也会执行。Promise.then()中的函数是异步执行的。**

以下输出：1243

const promise = new Promise((resolve, reject) => {
  console.log(1)
  resolve()
  console.log(2)
})
promise.then(() => {
  console.log(3)
})
console.log(4)

process.nextTick和promise.then属于microtask，setImmediate属于 macrotask。在每一次事件循环中，macrotask只会提取一个执行，而microtask会一直提取，直到microsoft队列为空为止。

以下输出：end nextTick then setTimeout1 setTimeout2

process.nextTick(() => {
  console.log("nextTick")
})

setTimeout(() => {
  console.log("setTimeout1")
})

Promise.resolve()
  .then(() => {
    console.log("then")
  })
  
setTimeout(() => {
  console.log("setTimeout2")
})

console.log("end")

补充：
macrotasks:

setTimeout

setInterval

setImmediate

requestAnimationFrame

I/O

UI rendering

microtasks:

process.nextTick

Promises

Object.observe

MutationObserver

参考文章

ES6关于Promise的用法
Promise 必知必会（十道题）
javascript中的异步 macrotask 和 microtask 简介
Tasks, microtasks, queues and schedules
Difference between microtask and macrotask within an event loop context

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

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

原创 | JS异步工具之--Promise

摘要：作者珂珂沪江前端开发工程师本文为原创文章，有不当之处欢迎指出。只对未来发生的事情做出两种基本情况的应对成功和失败。在异步转同步这条道路上，只是一个出彩的点，他还尚有一些缺陷和不足，并不是我们最终的解决方案。作者：珂珂（沪江前端开发工程师）本文为原创文章，有不当之处欢迎指出。转载请标明出处。一个新事物的产生必然是有其历史原因的。为了更好的以同步的方式写异步的代码，人们在JS上操碎了...

alanoddsoff 2019-08-20 19:05 评论0 收藏0
[es6系列]学习Promise

摘要：概述在之前，在中的异步编程都是采用回调函数和事件的方式，但是这种编程方式在处理复杂业务的情况下，很容易出现回调地狱，使得代码很难被理解和维护。如果不设置回调函数，内部的错误不会反应到外部。本文是基于对阮一峰的Promise文章的学习整理笔记，整理了文章的顺序、增加了更多的例子，使其更好理解。 1. 概述在Promise之前，在js中的异步编程都是采用回调函数和事件的方式，但是这种编...

YanceyOfficial 2019-08-22 10:46 评论0 收藏0
不同浏览器下 autoplay 的限制策略和方案的整理

摘要：不同浏览器下的限制策略和方案的整理端浏览器的限制策略和应对方案使用在端测试的浏览器包括浏览器浏览器浏览器浏览器限制策略内容参考自年月份发布的正式关掉了声音自动播放静音自动播放总是允许的。不同浏览器下 autoplay 的限制策略和方案的整理 PC 端浏览器的限制策略和应对方案使用 Mac 在 PC 端测试的浏览器包括 Chrome 浏览器 Safari 浏览器 Firefox...

LMou 2019-08-23 15:27 评论0 收藏0
javascript异步编程总结

摘要：以下总结了异步编程的种方式回调函数回调函数异步编程的最基本的方式。由小组的成员在规范中提出，目的是为异步编程提供统一接口。结尾参考文章异步编程参考文章使用详解前言 Javascript语言的执行环境是单线程。单线程：一次只能完成一个任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。单线程的好处是执行环境简单，坏处是在一些耗时的任务上会堵塞进程。比如读取一个...

yearsj 2019-08-23 16:20 评论0 收藏0