Promise、async/await、RxJs

Promise

promise状态：

Pending（进行中）、Fulfilled（已成功）、Rejected（已失败）

promise基本使用：

 new Promise((resolve,reject)=>{...})
.then(success=>{...})
.catch(error=>{...})
.finally(()=>{...});

Promise.resolve();
Promise.reject();

Promise.all();
Promise.race();
  
复制代码

promise需要注意的地方：

1.then（success=>{},error=>{}）中的error回调可以捕获reject结果，但是不能捕获success回调函数中的异常，所以我们推荐使用catch()函数捕获reject结果

2.then（）.then（）的调用链中return 新的promise对象会导致执行顺序的改变，如：

const p1 = new Promise((resolve, reject) => {
  console.log('promise1');//1
  resolve();
})
  .then(() => {
    console.log('then11');//3
    new Promise((resolve, reject) => {
      console.log('promise2');//4
      resolve();
    })
      .then(() => {
        console.log('then21');//6
      })
      .then(() => {
        console.log('then23');//8
      });
  })
  .then(() => {
    console.log('then12');//7
  });

const p2 = new Promise((resolve, reject) => {
  console.log('promise3');//2
  resolve();
}).then(() => {
  console.log('then31');//5
});


const p1 = new Promise((resolve, reject) => {
  console.log('promise1'); // 1
  resolve();
})
  .then(() => {
    console.log('then11'); // 2
    return new Promise((resolve, reject) => {
      console.log('promise2'); // 3
      resolve();
    })
      .then(() => {
        console.log('then21'); // 4
      })
      .then(() => {
        console.log('then23'); // 5
      });
  })
  .then(() => {
    console.log('then12'); //6
  });
复制代码

3.promise.then()期望参数是一个函数，如果不是函数就会发生值透传。就算发生了透传，promise.then()中的代码依旧也是会执行的。

参考：

从一道让我失眠的 Promise 面试题开始，深入分析 Promise 实现细节

Promise.any 的作用，如何自己实现一个 Promise.any

Promise.allSettled 的作用，如何自己实现一个 Promise.allSettled

如何来控制promise执行的并发数

这一次，彻底弄懂 Promise 原理

面试官：“你能手写一个 Promise 吗”

一起拿下异步

你真的完全掌握了promise么？

【建议星星】要就来45道Promise面试题一次爽到底(1.1w字用心整理)

进来看看ES6 Promise最全手写实现

Promise实现原理（附源码）

面试精选之Promise

Promise不会？？看这里！！！史上最通俗易懂的Promise！！！

前端工程师必知之Promise的实现

彻底理解Promise原理及全功能实现

Promise 被玩出 48 种“花样”，深度解析10个常用模块

-------------------------------------------------------------------------------

【译】async/await 应知应会

[译]JavaScript: Promises 介绍及为何 Async/Await 最终取得胜利

[译文]如何避开 async/await 地狱

一次性让你懂async/await，解决回调地狱

手写async、await、generator核心逻辑

嘿，不要给 async 函数写那么多 try/catch 了

说一说如何解决async await处理异常问题

面试官: 说说你对async的理解

async原理解析

7张图，20分钟就能搞定的async/await原理！

-----------------------------------------------------------------------------------

作为前端，你需要知道 RxJS（响应式编程-流）

RxJS教程

RxJS 源码解析（五）—— Operator III

RxJS——给你如丝一般顺滑的编程体验（篇幅较长，建议收藏）