文章目录

一、Promise
- 1、认识Promise
- - Promise的实例肯能由三种状态：
  - Promise原型上的方法：
  - Promise的静态方法：
  - then
  - catch
  - async await
  - - 练习题
  - finally
- 2、Promise:
- 3、如何修改实例的状态和值
二、THEN链的穿透/顺延机制
三、关于Promise.all/any/race 三个方法的研究
四、AJAX的串行和并行
- 1、并行
- 2、串行

一、Promise

1、认识Promise

ES6新增的内置类（构造函数），用来规划异步编程代码，用来解决回调地狱问题

Promise的实例肯能由三种状态：

原始状态是pending
成功态resolved/fulfilled
失败态rejected

实例的状态：只能由pending变成fulfilled或者rejected;不能由fulfilled变成rejected或者fulfilled（大白话就是状态只能由pending变成其他，而且只能变一次）

Promise原型上的方法：

then(成功态回调，失败态回调) 返回值是一个新的Promise实例
catch(失败态回调) 兜底上边实例的失败态的
finally(最后的回调)

Promise的静态方法：

resolve() 创造一个成功态的实例
reject() 创造一个失败态的实例
all([p1,p2,p3,p4]) 所有的实例都成功之后才会执行后边的成功态回调函数
race([p1,p2,p3,p4]) 只要有一个实例完成状态变换，后边的then就是给这个实例准备的

then

then的第一个回调函数的执行时机：实例的状态由pending变成fulfilled的时候
then的第一个回调函数的执行接收的实参：resolve执行的时候传递的第一个参数

then的第二个回调函数的执行时机：实例的状态由pending变成rejected的时候
then的第二个回调函数的执行接收的实参： reject执行的时候传递的第一个参数
第二个回调函数可以把reject的错误信息融掉，不显示在控制台
第二个回调函数可以不写

catch

catch对应的回调函数什么时候执行上边的实例出现失败态的时候
catch 兜底的错误是没有被上边兜住的错误

let p1 = new Promise((res, rej) => {rej(777)})p1.then(data => {console.log('data', data)}).then(data2 => {console.log('data2', data2)console.log(qqq)}, err2 => {console.log('err2', err2)}).catch(err3 => {console.log('err3', err3)})

async await

async await 的语法是为了让编写异步代码更像是在编写同步代码
async await 需要结合Promise语法才能起作用

async/await:是Promise+Generator的“语法糖”
async是对函数的修饰 -> async function xxx(){…}

让函数的返回值自动变味promise实例
- 函数执行报错，则返回状态是rejected，值是报错原因的实例
- 如果执行不报错，在看返回值
  - 返回值是新的实例，则以自己返回的promise实例为主
  - 其它情况都返回一个状态是fulfilled，值是返回值的实例
- 可以在函数中使用await
  await可以监听promise实例的状态，从而决定去做啥事 -> let xxx = await [promise实例];
- 必须出现在一个函数中，并且是经过async修饰的函数
- await后面需要跟一个promise实例「如果不是promise实例，浏览器也会把其变为promise实例」
  await 14； => await Promise。resolve(14)；
- await会“等待”后面实例的状态为“成功”时，再把“当前上下文”中，await“下面”的代码执行！xxx就是当前实例状态为成功返回的结果
- 如果await后面的实例状态是失败，则下面代码不会执行(控制台报红，但是不影响其它代码执行)！！
- 我们是基于try/catch实现对await后面的实例为失败态的处理，避免报红

练习题

1、

async function async1() {console.log('async1 start');await async2();console.log('async1 end');
}
async function async2() {console.log('async2');
}
console.log('script start');
setTimeout(function() {console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {console.log('promise1');resolve();
}).then(function() {console.log('promise2');
});
console.log('script end');答案：
'script start'
'async1 start'
'async2'
'promise1'
'script end'
'async1 end'
'promise2'
'setTimeout'

2、

let body = document.body;
body.addEventListener('click', function () {Promise.resolve().then(() => {console.log(1);});console.log(2);
});
body.addEventListener('click', function () {Promise.resolve().then(() => {console.log(3);});console.log(4);
});答案：2 1 4 3

finally

对应的回调会在最后不管前边是成功了还是失败了 ,都会走 finally对应的回调函数没有参数

Promise.resolve(10).then(value => {console.log('成功', value);return value * 10;}).then(value => {console.log('成功', value);return Promise.reject(value * 10);}).then(value => {console.log('成功', value);return value * 10;}).catch(reason => {console.log('失败', reason);}).finally(()=>{//不论成功还是失败，最后都有要执行finally中的方法「一般不用」});

2、Promise:

ES6新增的内置类（构造函数），用来规划异步编程代码，用来解决回调地狱问题

let p1=new Promise([executor])

[executor]必须是一个函数，而且new Promise的时候会立即把其执行 “同步”
p1是其创建出来的实例
私有属性
- [[PromiseState]]：“pending”、“fulfilled”、“rejected”实例的状态
- [[PromiseResult]]：undefined 实例的值「成功的结果或者失败的原因」
共有属性
- then
- catch
- finally
- …
p1.then([onfulfilled],[onrejected])
- [onfulfilled]/[onrejected]都是函数
- 实例的状态是成功fulfilled的时候，会把[onfulfilled]执行，并且把实例的值作为成功的结果传递给他
- 实例状态是失败rejected的时候，会把[onrejected]执行，把实例值作为失败的原因传递给他

3、如何修改实例的状态和值

@1 基于这种方式创建实例 let p=new Promise(()=>{ 。。。})

resolve/reject也是函数
- resolve(‘ok’) -> 把实例p的状态修改为fulfilled，值（成功结果）是‘OK’
- rejected(‘no’) -> 把实例p的状态修改为rejected，值（失败原因）是‘NO’
如果executor函数执行报错，则把实例的状态修改为rejected，值是报错原因「不会抛错」
一但状态被修改fulfilled或者rejected，后期就不会在更改状态值了

@2 每一次执行then方法，都会返回一个“全新的promise实例”
let p2=p1.then(onfulfilled,onrejected);
不论onfulfilled执行还是onrejected执行（由p1状态来决定），方法的执行决定了p2的状态和值

首先看方法执行是否报错，如果报错了，则p2是失败态（rejected），值是报错原因
如果执行不报错，在看方法的返回值
- 如果返回的是“promise实例 -> @NP”,则@NP的状态和值直接决定了p2的状态和值
- 如果返回的不是新实例，则p2状态是成功(fulfilled),值是函数的返回值

@3 执行Promise.resolve/reject/all/any/race…等静态私有方法，也会创建新的Promise实例

Promise.resolve(10) 创建一个状态是成功fulfilled，值是10的实例
Promise.reject(10) 创建一个状态是失败的rejected，值是0的实例

二、THEN链的穿透/顺延机制

.then(onfulfilled,onrejected)，两个方法可以传可以不传，如果不传，则顺延至下一个then中，相同状态要执行的方法中去处理！！
- 原理：我们不设置对应的方法，Promise内部会默认加一个对应的方法，可以让其实现状态的顺延/穿透

p.catch(onrejected) 等价于 p.then(null,onrejected)

三、关于Promise.all/any/race 三个方法的研究

let p=Promise.all([Promises]);

promises是包含零到多个promise实例的集合，一般是数组！如果集合中的某一项不是promise实例，则默认变为状态为成功，只是本身的promise实例！！
all：集合中的每个实例都为成功，最后结果p才是成功，值是按照集合顺序，依次存储每个实例成功的结果的数组；
其中只要一个实例失败，则p就是失败，值是本次失败的原因，后面的操作不在处理！！
any：只要有一个成功，最后p就是成功，值是本次成功的结果；都失败，最后p才是失败！！「兼容性不好」
race：集合中谁最先知道结果，则以谁的为主！

四、AJAX的串行和并行

1、并行

并行：多个请求同时发送即可，谁先回来先处理谁，主要用于多个请求间没有依赖「偶尔我们需要监测，多个请求都成功，整体再去做啥事 => Promise.all」

2、串行

串行：多个请求之间存在依赖，上一个请求成功，我们才能发送下一个（往往是下一个请求需要用到上一个请求的结果，才需要这样处理）

注意：在项目中发送ajax请求都是“采用异步编程”

Promise、THEN链的穿透/顺延机制、关于Promise.all/any/race 三个方法的研究、AJAX的串行和并行相关推荐

Promise的链式调用三种写法，Promise.all与式调用
Promise的链式调用三种写法: // 1,Promise原始链式调用 new Promise((resolve, reject) => {setTimeout(() => {conso ...
彻底掌握 Promise-原生Promise的实现(二) Promise的链式调用
在彻底掌握 Promise- 原生 Promise 的实现(一) 已经初步实现了 promise 的简易版本,这距离实现完整版本的 Promise 还有一段距离,下面我们将在简易版本的基础上增加 P ...
万向副董肖风：区块链的六大治理机制
雷锋网(公众号:雷锋网)4月28日报道,今日2017全球区块链金融峰会在杭州举行.大会宣布了全国首个区块链产业园区落户杭州,此外还邀请了多位重量级嘉宾演讲,据雷锋网了解包括以太坊创始人 Vitalik ...
数字金融VS传统金融，区块链如何革新信任机制？
Key 现在并没有形成⼀个很明显的固定的格局,所以⼀切皆有可能.发展的关键在技术能否转化为产品,产品能否解决⾏业痛点问题. 区块链最大的价值在于它能有效降低建立信任的成本.对于监管这个问题,⼤家应该要 ...
Promise静态方法，then的顺延，resolve函数
一. Promise的静态方法都有哪些,各自有什么作用? Promise.resolve() 直接创建一个成功的promise let p = Promise.resolve("成功了&qu ...
存储公链的存储共识机制
存储公链是提供去中心化存储(也称为分布式存储)能力的公链,是区块链技术成功应用于实体经济的典型场景. 存储公链需要存储共识机制,用于证明存储节点是否真实存储了数据.难以作弊.成本代价低是存储共识的追求 ...
一文读懂区块链共识及其容错机制
翻译 | shawn 编辑 | 波波区块链是一个分布式和去中心化的系统,这意味着它需要一种可以追踪当前系统官方状态的方法.由于区块链可以包括金融交易和商业协议,因此所有相关方必须在协议条款上保持一致 ...
promise原理—一步一步实现一个promise
promise特点一个promise的当前状态只能是pending.fulfilled和rejected三种之一.状态改变只能是pending到fulfilled或者pending到rejected ...
promise then err_Promise 原理解析与实现(遵循Promise/A+规范)
1什么是Promise? Promise是JS异步编程中的重要概念,异步抽象处理对象,是目前比较流行Javascript异步编程解决方案之一 2对于几种常见异步编程方案回调函数事件监听发布/订阅 ...

Promise、THEN链的穿透/顺延机制、关于Promise.all/any/race 三个方法的研究、AJAX的串行和并行