一、什么是promise

1.promise简介

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

2.promise的特点

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

3.promise案例分析

//new一个新的promise实例
let promise = new Promise(function(resolve, reject){setTimeout(function(){console.log("---执行了promise---");resolve("执行成功的返回数据")},2000)
}) 执行结果：
---执行了promise---

（1）当我们new了一个promise实例，我们没有去调用它他就自己去执行了，所以我们一般在promise实例外面嵌套一层方法。

（2）我们发现只输出了“执行了promise”，那么resolve的作用是什么呢？

二、promise怎么用

书接上文：①为什么我们要把promise封装在一个方法里面？②resolve的作用是什么？

1.我们包装好的函数的原因：当我们将promise封装成一个函数以后，会return出Promise对象，也就是说，执行这个函数我们得到了一个Promise对象。接下来就可以用Promise对象上有then、catch方法了，这就是Promise的强大之处了。

let demonstration = () => {let promise = new Promise(function (resolve, reject) {setTimeout(function () {console.log("---执行了promise---");resolve("执行成功的返回数据")}, 2000)})return promise
}
demonstration().then(res=>{console.log(res);return demonstration()
}).then(res=>{console.log(res);
})输出结果：
---执行了promise---
执行成功的返回数据
---执行了promise---
执行成功的返回数据

（1）封装成一个方法，我们可以在需要的地方去调用需要的promise，通过.then解决了函数回调地狱的问题，resolve的输出值可以在.then的res参数中获取得到。

2.reject和catch的使用

在promise中resolve是promise成功时候的回调，将promise的状态改成fullfiled，而reject就是promise失败时候的回调，将promise的状态改成了rejected，无论那种情况都可以在.then中进行获取。

let demonstration = () => {let promise = new Promise((resolve, reject) =>{var num = Math.ceil(Math.random()*20);//获取1-20随机数if(num<=10){resolve("判断条件满足"+num+"小于10")}else{reject("判断条件不满足"+num+"大于10")}})return promise
}
demonstration().then((res,rej)=>{console.log("第一次.then");console.log(res);console.log(rej);return demonstration()
}).then((res,rej)=>{console.log("第二次.then");console.log(res);console.log(rej);return demonstration()
}).catch((res,rej)=>{console.log(".catch");console.log(res);console.log(rej);
})执行结果：
1.第一次满足第二次不满足情况
第一次.then
判断条件满足2小于10
undefined
.catch
判断条件不满足15大于10
undefined
2.都满足情况
第一次.then
判断条件满足10小于10
undefined
第二次.then
判断条件满足6小于10
undefined
3.第一次满足第二次满足第三次不满足情况
第一次.then
判断条件满足8小于10
undefined
第二次.then
判断条件满足8小于10
undefined
.catch
判断条件不满足19大于10
undefined

（1）情况有点多，主要讲解一下reject与catch方法的使用，与Promise对象方法then方法并行的一个方法就是catch,与try catch类似，catch就是用来捕获异常的，也就是和then方法中接受的第二参数rejected的回调是一样的。但是，它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。可以在这里进行一些报错的处理

3.all的用法

Promise.all来执行，all接收一个数组参数，这组参数为需要执行异步操作的所有方法，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。那么，三个异步操作返回的数据哪里去了呢？都在then里面，all会把所有异步操作的结果放进一个数组中传给then，然后再执行then方法的成功回调将结果接收，结果如下：（分别执行得到结果，all统一执行完三个函数并将值存在一个数组里面返回给then进行回调输出）：

let demonstration = () => {let promise = new Promise((resolve, reject) =>{var num = Math.ceil(Math.random()*20);//获取1-20随机数if(num<=10){resolve("判断条件满足"+num+"小于10")}else{reject("判断条件不满足"+num+"大于10")}})return promise
}
Promise.all([demonstration(),demonstration()]).then(res=>{console.log("all全部成功执行then");console.log(res);
})
执行结果（当两次demonstration()都执行成功时会执行.then方法）：
all全部成功执行then
[ '判断条件满足3小于10', '判断条件满足9小于10' ]

这样以后就可以用all并行执行多个异步操作，并且在一个回调中处理所有的返回数据，比如你需要提前准备好所有数据才渲染页面的时候就可以使用all,执行多个异步操作将所有的数据处理好，再去渲染

4.race的用法

all是等所有的异步操作都执行完了再执行then方法，那么race方法就是相反的，谁先执行完成就先执行回调。先执行完的不管是进行了race的成功回调还是失败回调，其余的将不会再进入race的任何回调，可以理解为race里面只执行第一个完成的promise其他的无论成功还是失败，后面的都不会进行到race的then方法了。

let demonstration = () => {let promise = new Promise((resolve, reject) =>{var num = Math.ceil(Math.random()*20);//获取1-20随机数if(num<=10){resolve("判断条件满足"+num+"小于10")}else{reject("判断条件不满足"+num+"大于10")}})return promise
}
let demonstrationAA = () => {let promise = new Promise((resolve, reject) =>{var num = Math.ceil(Math.random()*20);//获取1-20随机数if(num<=10){resolve("判断条件满足"+num+"小于10AA")}else{reject("判断条件不满足"+num+"大于10AA")}})return promise
}
Promise.race([demonstrationAA(),demonstration()]).then((res,rej)=>{console.log("第一次执行成功的结果",res);console.log("第一次执行失败的结果",rej);
})

（1）可以理解为当某个promise执行完成后，执行then方法后面的promise都不会触发then了。只能执行一次then方法。

附：大部分引用ES6 promise这个文章，加上一些自己的看法和总结。谢谢大家观看。

promise用法详解相关推荐

ES6 之 Promise用法详解
promise用了这么多年了,一直也没有系统整理过.今天整理整理promise的相关东西,感兴趣的可以一起看一看.我尽量用更容易理解的语言来剖析一下promise 我准备分两篇文章来说明一下promi ...
Javascript Promise用法详解
1.约定本文的 demo 代码有些是伪代码,不可以直接执行. 没有特殊说明,本文所有 demo 都是基于 ES6 规范. Object.method 代表是静态方法, Object#method 代 ...
es6中promise用法详解
1.含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象. ...
Promise用法详解(一)
Promise 基本概念 Promise是一个构造函数,所以可以 new 出一个Promise的实例在Promise上有两个函数 resolve(成功之后的回调函数)和 reject(失败后的回调函 ...
ES6 — Promise基础用法详解（resolve、reject、then、catch,all,）
ES6 - Promise基础用法详解 Promise 是一个构造函数,它自身拥有all.reject.resolve这几个眼熟的方法, 原型上有then.catch等同样熟悉的方法. 所以,在开始一 ...
【ES6】Promise对象详解
[ES6]Promise对象详解一.Promise对象的含义二.Promise对象的用法三.Promise对象的几个应用[重点] 1.时间延迟函数 2.图片异步加载查看更多ES6教学文章: 参 ...
ajax then fail done,Jquery $when done then的用法详解
对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when...done...fail...then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下 ...
【JavaScript 教程】ES6 中的 Promise对象详解
[JavaScript 教程]ES6 中的 Promise对象详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...
python argv 详解_Python3 sys.argv[ ]用法详解
sys.argv[]说白了就是一个从程序外部获取参数的桥梁,这个"外部"很关键,因为我们从外部取得的参数可以是多个,所以获得的是一个列表(list),也就是说sys.argv其实可 ...

promise用法详解