一、Promise是什么

A promise is an object that may produce a singe value some time in the future:either a resolved value ,or a reason that it’s not resolved .(e.g.,a network error occurred)
简单说就是一个异步实现的对象，它或者可以解决掉问题，或者可以给予一个未能解决掉这个问题的原因。

二、为什么会有Promise

1、回调地狱 + 异步同步事件调用顺序带来的双重伤害

promise是一个异步函数，并且它能够解决地狱回调。地狱回调简单理解为回调中嵌套回调，当回调的层数太多了就会看起来很混乱。当然如果promise的then太多了，那么我们可以使用Generator或async/await

2、回调事件的分离

then返回的是一个新的promise，它是通过之前的一个promise返回值的不同进行不同方法的调用。即如果上一个promise成功了就执行第一个方法，如果上一个未成功就执行第二个方法。

三、Promise的三种状态

1、resolve

将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

2、reject

将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

3、pending

当前promise状态正在执行，状态只要改变，就会凝固不会再次变化，且方法只能被调用一次。

四、then catch all race

1、then

1、接收两个函数作为参数，分别代表resolve和rejected
2、.then()返回一个新的Promise实例，所以它可以链式调用
3、当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
4、状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null；
5、如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
6、如果返回其他任何值，则会立即执行下一级.then()

2、catch

catch方法会捕捉catch前到上一个catch中间的，没有设置then的reject方法的reject.

 thing1().then(()=>{return thing2();   }).then(()=>{return thing3()}).catch((err)=>{return err1() }).then(()=>{return thing4()},(err)=>{return err2()}).catch((err)=>{return err3()}).then(()=>{return thing5()})

catch会捕获catch之前所有的未捕获的异常，并且返回一个resolved状态的promise实例。
catch和then的区别，catch会捕获之前所有的reject，而then只捕获之前的一个reject。

3、all

al将多个promise封装为一个新的promise，all接收一个数组作为参数，数组里可以是Promise对象，也可以是别的值，只有Promise会等待状态改变
当所有的子Promise都完成，该Promise完成，返回值是全部值的数组。
有任何一个失败，该Promise失败，返回值是第一个失败的子Promise结果

4、race

类似于all，区别在于它有任意一个完成就算完成

五、基本用法

// 第一步：model层的接口封装const promise = new Promise((resolve, reject) => {// 这里做异步任务（比如ajax 请求接口。这里暂时用定时器代替）setTimeout(function() {var flag = 0 // 接口返回的数据if (flag == 0) {// 接口请求成功时调用resolve(flag);} else {// 接口请求失败时调用reject('network error');}}, 0);});// 第二步：业务层的接口调用。这里的 data 就是 从 resolve 和 reject 传过来的，也就是从接口拿到的数据promise.then(data => {// 从 resolve 获取正常结果console.log(data);}).catch(data => {// 从 reject 获取异常结果console.log(data);});

六、实现Promise

因为promise是一个类，所以promise要用new方法去定义

//定义promise的三个状态
enum state = {penging:"pending",resolved = "resolved",rejected = "rejected"
}
class promise{constructor(callback) {callback(this._resolve.bind(this),this._reject.bind(this));}_state: state = state.pending;_value: any;_resolve(val) {if(this._state === state.pending){this._value = val;this._state = state.resolved;this._runResolveArray();}}_reject() {}_runResolveArray(){this._resArray.forEach(item =>{const result = item.handle(this._value);const nextPromise = item.promise;if(result instanceof promise){result.then(val=>item.promise._resolve(val))}else{item.promise.resolve(result)}})}_resArray = []then(onRes , onRej = () => {}) {const newPromise = new promise(() => {});const item = { promise: newPromise, handle: onRes};this._resArray.push(item)if(this._state === state.resolve){this._runResolveArray();}return newPromise; }
}

注意：promise的方法是同步方法，then是微任务的异步代码。

ES6 Promise原理相关推荐

ES6之Promise原理及常用的api
前言: 1.Promise原理解析 2.后面部分讲 then,resolve与reject,all,race的操作一.Promise原理先看原理图: ①执行new Promise时会返回一个空状态 ...
Vue进阶（四十五）：精解 ES6 Promise 用法
文章目录一.前言二.链式操作用法三.reject 用法四.catch 用法五.all 用法六.race 用法七.总结八.拓展阅读一.前言复杂难懂概念先不讲,我们先简单粗暴地把Pro ...
十分钟快速了解 ES6 Promise
转载自十分钟快速了解 ES6 Promise 什么是Promise Promise最早由社区提出并实现,典型的一些库有Q,when, bluebird等:它们的出现是为了更好地解决JavaScrip ...
解读ES6 Promise
详解ES6 Promise异步文章目录详解ES6 Promise异步前言一.Promise是什么呢... 二.resolve 三.reject 四.then() & catch() 五 ...
流程控制： jQ Deferred 与 ES6 Promise 使用新手向入坑！
谢谢n͛i͛g͛h͛t͛i͛r͛e͛大大指出的关于Promise中catch用的不到位的错误,贴上大大推荐的文章Promise中的菜鸟和高阶错误,文章很详细说明了一些Promise使用中的错误和指导. ...
面试题promise原理
面试题Promise原理在Promise的内部,有一个状态管理器的存在,有三种状态:pending.fulfilled.rejected. (1) promise 对象初始化状态为 pending. ...
es6 Promise是什么?
# es6 Promise是什么? 1. Promise 是一个构造函数自带三个方法 all.resolve.reject,原型上(prototype)有then.catch等的几个常用的方法. ` ...
ES6 — Promise基础用法详解（resolve、reject、then、catch,all,）
ES6 - Promise基础用法详解 Promise 是一个构造函数,它自身拥有all.reject.resolve这几个眼熟的方法, 原型上有then.catch等同样熟悉的方法. 所以,在开始一 ...
从零开始，手写完整的Promise原理！
珠峰十年深度沉淀,最具诚意与深度的课程限时免费开放,带你从0到1完美诠释异步编程,并手写一个完整的promise原理! [扫码免费参加,限200人] (名额有限,扫描上方二维码立即参加!) 历史学员 ...

ES6 Promise原理