最新理解：new Promise()接收一个函数参数，会return一个promise对象，该对象中会立刻执行new Promise()中的函数参数，即函数中除了resolve()和reject()的部分，执行完成后会出现结果并调用resolve()或reject()【注意：这两个函数是要手动调用的，即你自己决定何时执行成功，调用resolve()；何时执行失败，调用reject()】，此时停止，直到通过调用promise实例中的then()时才会根据结果，成功则调用resolve()，失败则调用reject()。
摘要：then方法是一个函数接受一个参数是接受resolve返回的数据；then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。与Promise对象方法then方法并行的一个方法就是catch,与try catch类似，catch就是用来捕获异常的，也就是和then方法中接受的第二参数rejected的回调是一样的，它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。
就个人理解来说resolve(res)时会将结果赋值给res并return出去，并在.then()的第一个函数参数中用其参数接受res的值；如果resolve参数直接是某数据，那么将数据赋值给接收函数的参数。
参考：https://wangdoc.com/javascript/async/promise.html
1.什么是Promise
Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。
Promise对象有以下两个特点。
（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
下面先 new一个Promise
let p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完成Promise'); resolve('要返回的数据可以任何数据例如接口返回数据'); }, 2000); });
刷新页面会发现控制台直接打出
其执行过程是：执行了一个异步操作，也就是setTimeout，2秒后，输出“执行完成”，并且调用resolve方法。
注意！我只是new了一个对象，并没有调用它，我们传进去的函数就已经执行了，这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数，如：
<div onClick={promiseClick}>开始异步请求</div>
const promiseClick =()=>{
console.log('点击方法被调用')
let p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('执行完成Promise');
resolve('要返回的数据可以任何数据例如接口返回数据');
}, 2000);
});
return p
}
}
刷新页面的时候是没有任何反应的，但是点击后控制台打出
当放在函数里面的时候只有调用的时候才会被执行
那么，接下里解决两个问题：
1、为什么要放在函数里面
2、resolve是个什么鬼
我们包装好的函数最后，会return出Promise对象，也就是说，执行这个函数我们得到了一个Promise对象。接下来就可以用Promise对象上有then、catch方法了，这就是Promise的强大之处了，看下面的代码：
promiseClick().then(function(data){ console.log(data); //后面可以用传过来的数据做些其他操作 //...... });
这样控制台输出
先是方法被调用起床执行了promise,最后执行了promise的then方法，then方法是一个函数接受一个参数是接受resolve返回的数据这事就输出了‘要返回的数据可以任何数据例如接口返回数据’
这时候你应该有所领悟了，原来then里面的函数就跟我们平时的回调函数一个意思，能够在promiseClick这个异步任务执行完成之后被执行。这就是Promise的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。
你可能会觉得在这个和写一个回调函数没有什么区别；那么，如果有多层回调该怎么办？如果callback也是一个异步操作，而且执行完后也需要有相应的回调函数，该怎么办呢？总不能再定义一个callback2，然后给callback传进去吧。而Promise的优势在于，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。
所以：精髓在于：Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：
promiseClick() .then(function(data){ console.log(data); return runAsync2(); }) .then(function(data){ console.log(data); return runAsync3(); }) .then(function(data){ console.log(data); });
这样能够按顺序，每隔两秒输出每个异步回调中的内容，在runAsync2中传给resolve的数据，能在接下来的then方法中拿到。
Ps：此处执行多次是因为研究该用法的时候我在一个react的demo中进行的，该页面多个元素改变导致页面多次渲染执行所致，正常页面只渲染一次的话就所有只会执行一次）
reject的用法
以上是对promise的resolve用法进行了解释，相当于resolve是对promise成功时候的回调，它把promise的状态修改为
fullfiled，那么，reject就是失败的时候的回调，他把promise的状态修改为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。
function promiseClick(){ let p = new Promise(function(resolve, reject){ setTimeout(function(){ var num = Math.ceil(Math.random()*20); //生成1-10的随机数 console.log('随机数生成的值：',num) if(num<=10){ resolve(num); } else{ reject('数字太于10了即将执行失败回调'); } }, 2000); }) return p } promiseClick().then( function(data){ console.log('resolved成功回调'); console.log('成功回调接受的值：',data); }, function(reason, data){ console.log('rejected失败回调'); console.log('失败执行回调抛出失败原因：',reason); } );
执行结果：
（PS：此处也是执行多次所以输出多次，执行多次的原因和上次原因一致）
以上代码：调用promiseClick方法执行，2秒后获取到一个随机数，如果小于10，我们算成功，调用resolve修改Promise的状态为fullfiled。否则我们认为是“失败”了，调用reject并传递一个参数，作为失败的原因。并将状态改成rejected
运行promiseClick并且在then中传了两个参数，这两个参数分别是两个函数，then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。（也就是说then方法中接受两个回调，一个成功的回调函数，一个失败的回调函数，并且能在回调函数中拿到成功的数据和失败的原因），所以我们能够分别拿到成功和失败传过来的数据就有以上的运行结果
catch的用法
与Promise对象方法then方法并行的一个方法就是catch,与try catch类似，catch就是用来捕获异常的，也就是和then方法中接受的第二参数rejected的回调是一样的，如下：
function promiseClick(){ let p = new Promise(function(resolve, reject){ setTimeout(function(){ var num = Math.ceil(Math.random()*20); //生成1-10的随机数 console.log('随机数生成的值：',num) if(num<=10){ resolve(num); } else{ reject('数字太于10了即将执行失败回调'); } }, 2000); }) return p } promiseClick().then( function(data){ console.log('resolved成功回调'); console.log('成功回调接受的值：',data); } ) .catch(function(reason, data){ console.log('catch到rejected失败回调'); console.log('catch失败执行回调抛出失败原因：',reason); });
执行结果：
效果和写在then的第二个参数里面一样。它将大于10的情况下的失败回调的原因输出，但是，它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。如下：
function promiseClick(){ let p = new Promise(function(resolve, reject){ setTimeout(function(){ var num = Math.ceil(Math.random()*20); //生成1-10的随机数 console.log('随机数生成的值：',num) if(num<=10){ resolve(num); } else{ reject('数字太于10了即将执行失败回调'); } }, 2000); }) return p } promiseClick().then( function(data){ console.log('resolved成功回调'); console.log('成功回调接受的值：',data); console.log(noData); } ) .catch(function(reason, data){ console.log('catch到rejected失败回调'); console.log('catch失败执行回调抛出失败原因：',reason); });
执行结果：
在resolve的回调中，我们console.log(noData);而noData这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，会得到上图的结果，也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了
all的用法
与then同级的另一个方法，all方法，该方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后并且执行结果都是成功的时候才执行回调。
如果全部成功执行，则以数组的方式返回所有 Promise 任务的执行结果。 如果有一个 Promise 任务 rejected，则只返回 rejected 任务的结果。
将上述方法复制两份并重命名promiseClick3(), promiseClick2(), promiseClick1()，如下
function promiseClick1(){ let p = new Promise(function(resolve, reject){ setTimeout(function(){ var num = Math.ceil(Math.random()*20); //生成1-10的随机数 console.log('随机数生成的值：',num) if(num<=10){ resolve(num); } else{ reject('数字太于10了即将执行失败回调'); } }, 2000); }) return p } function promiseClick2(){ let p = new Promise(function(resolve, reject){ setTimeout(function(){ var num = Math.ceil(Math.random()*20); //生成1-10的随机数 console.log('随机数生成的值：',num) if(num<=10){ resolve(num); } else{ reject('数字太于10了即将执行失败回调'); } }, 2000); }) return p } function promiseClick3(){ let p = new Promise(function(resolve, reject){ setTimeout(function(){ var num = Math.ceil(Math.random()*20); //生成1-10的随机数 console.log('随机数生成的值：',num) if(num<=10){ resolve(num); } else{ reject('数字太于10了即将执行失败回调'); } }, 2000); }) return p } Promise .all([promiseClick3(), promiseClick2(), promiseClick1()]) .then(function(results){ console.log(results); });
Promise.all来执行，all接收一个数组参数，这组参数为需要执行异步操作的所有方法，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。那么，三个异步操作返回的数据哪里去了呢？都在then里面，all会把所有异步操作的结果放进一个数组中传给then，然后再执行then方法的成功回调将结果接收，结果如下：（分别执行得到结果，all统一执行完三个函数并将值存在一个数组里面返回给then进行回调输出）：
这样以后就可以用all并行执行多个异步操作，并且在一个回调中处理所有的返回数据，比如你需要提前准备好所有数据才渲染页面的时候就可以使用all,执行多个异步操作将所有的数据处理好，再去渲染
race的用法
all是等所有的异步操作都执行完了再执行then方法，那么race方法就是相反的，谁先执行完成就先执行回调。
我们将上面的方法延迟分别改成234秒
function promiseClick1(){ let p = new Promise(function(resolve, reject){ setTimeout(function(){ var num = Math.ceil(Math.random()*20); //生成1-10的随机数 console.log('2s随机数生成的值：',num) if(num<=10){ resolve(num); } else{ reject('2s数字太于10了即将执行失败回调'); } }, 2000); }) return p } function promiseClick2(){ let p = new Promise(function(resolve, reject){ setTimeout(function(){ var num = Math.ceil(Math.random()*20); //生成1-10的随机数 console.log('3s随机数生成的值：',num) if(num<=10){ resolve(num); } else{ reject('3s数字太于10了即将执行失败回调'); } }, 3000); }) return p } function promiseClick3(){ let p = new Promise(function(resolve, reject){ setTimeout(function(){ var num = Math.ceil(Math.random()*20); //生成1-10的随机数 console.log('4s随机数生成的值：',num) if(num<=10){ resolve(num); } else{ reject('4s数字太于10了即将执行失败回调'); } }, 4000); }) return p } Promise .race([promiseClick3(), promiseClick2(), promiseClick1()]) .then(function(results){ console.log(results); },function(reason){ console.log(reason); });
当2s后promiseClick1执行完成后就已经进入到了then里面回调，在then里面的回调开始执行时，promiseClick2()和promiseClick3()并没有停止，仍旧再执行。于是再过3秒后，输出了他们各自的回调值
概述Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数。
注意，本章只是 Promise 对象的简单介绍。为了避免与后续教程的重复，更完整的介绍请看《ES6 标准入门》的《Promise 对象》一章。
首先，Promise 是一个对象，也是一个构造函数。
function f1(resolve, reject) { // 异步代码...}
var p1 = new Promise(f1);上面代码中，Promise构造函数接受一个回调函数f1作为参数，f1里面是异步操作的代码。然后，返回的p1就是一个 Promise 实例。
Promise 的设计思想是，所有异步任务都返回一个 Promise 实例。Promise 实例有一个then方法，用来指定下一步的回调函数。
var p1 = new Promise(f1);p1.then(f2);上面代码中，f1的异步操作执行完成，就会执行f2。
传统的写法可能需要把f2作为回调函数传入f1，比如写成f1(f2)，异步操作完成后，在f1内部调用f2。Promise 使得f1和f2变成了链式写法。不仅改善了可读性，而且对于多层嵌套的回调函数尤其方便。
// 传统写法step1(function (value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { // ... }); }); });});
// Promise 的写法(new Promise(step1)) .then(step2) .then(step3) .then(step4);从上面代码可以看到，采用 Promises 以后，程序流程变得非常清楚，十分易读。注意，为了便于理解，上面代码的Promise实例的生成格式，做了简化，真正的语法请参照下文。
总的来说，传统的回调函数写法使得代码混成一团，变得横向发展而不是向下发展。Promise 就是解决这个问题，使得异步流程可以写成同步流程。
Promise 原本只是社区提出的一个构想，一些函数库率先实现了这个功能。ECMAScript 6 将其写入语言标准，目前 JavaScript 原生支持 Promise 对象。
Promise 对象的状态Promise 对象通过自身的状态，来控制异步操作。Promise 实例具有三种状态。
异步操作未完成（pending）异步操作成功（fulfilled）异步操作失败（rejected）上面三种状态里面，fulfilled和rejected合在一起称为resolved（已定型）。
这三种的状态的变化途径只有两种。
从“未完成”到“成功”从“未完成”到“失败”一旦状态发生变化，就凝固了，不会再有新的状态变化。这也是 Promise 这个名字的由来，它的英语意思是“承诺”，一旦承诺成效，就不得再改变了。这也意味着，Promise 实例的状态变化只可能发生一次。
因此，Promise 的最终结果只有两种。
异步操作成功，Promise 实例传回一个值（value），状态变为fulfilled。异步操作失败，Promise 实例抛出一个错误（error），状态变为rejected。Promise 构造函数JavaScript 提供原生的Promise构造函数，用来生成 Promise 实例。
var promise = new Promise(function (resolve, reject) { // ...
if (/* 异步操作成功 */){ resolve(value); } else { /* 异步操作失败 */ reject(new Error()); }});上面代码中，Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己实现。
resolve函数的作用是，将Promise实例的状态从“未完成”变为“成功”（即从pending变为fulfilled），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。reject函数的作用是，将Promise实例的状态从“未完成”变为“失败”（即从pending变为rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
下面是一个例子。
function timeout(ms) { return new Promise((resolve, reject) => { setTimeout(resolve, ms, 'done'); });}
timeout(100)上面代码中，timeout(100)返回一个 Promise 实例。100毫秒以后，该实例的状态会变为fulfilled。
Promise.prototype.then()Promise 实例的then方法，用来添加回调函数。
then方法可以接受两个回调函数，第一个是异步操作成功时（变为fulfilled状态）的回调函数，第二个是异步操作失败（变为rejected）时的回调函数（该参数可以省略）。一旦状态改变，就调用相应的回调函数。
var p1 = new Promise(function (resolve, reject) { resolve('成功');});p1.then(console.log, console.error);// "成功"
var p2 = new Promise(function (resolve, reject) { reject(new Error('失败'));});p2.then(console.log, console.error);// Error: 失败上面代码中，p1和p2都是Promise 实例，它们的then方法绑定两个回调函数：成功时的回调函数console.log，失败时的回调函数console.error（可以省略）。p1的状态变为成功，p2的状态变为失败，对应的回调函数会收到异步操作传回的值，然后在控制台输出。
then方法可以链式使用。
p1 .then(step1) .then(step2) .then(step3) .then( console.log, console.error );上面代码中，p1后面有四个then，意味依次有四个回调函数。只要前一步的状态变为fulfilled，就会依次执行紧跟在后面的回调函数。
最后一个then方法，回调函数是console.log和console.error，用法上有一点重要的区别。console.log只显示step3的返回值，而console.error可以显示p1、step1、step2、step3之中任意一个发生的错误。举例来说，如果step1的状态变为rejected，那么step2和step3都不会执行了（因为它们是resolved的回调函数）。Promise 开始寻找，接下来第一个为rejected的回调函数，在上面代码中是console.error。这就是说，Promise 对象的报错具有传递性。
then() 用法辨析Promise 的用法，简单说就是一句话：使用then方法添加回调函数。但是，不同的写法有一些细微的差别，请看下面四种写法，它们的差别在哪里？
// 写法一f1().then(function () { return f2();});
// 写法二f1().then(function () { f2();});
// 写法三f1().then(f2());
// 写法四f1().then(f2);为了便于讲解，下面这四种写法都再用then方法接一个回调函数f3。写法一的f3回调函数的参数，是f2函数的运行结果。
f1().then(function () { return f2();}).then(f3);写法二的f3回调函数的参数是undefined。
f1().then(function () { f2(); return;}).then(f3);写法三的f3回调函数的参数，是f2函数返回的函数的运行结果。
f1().then(f2()) .then(f3);写法四与写法一只有一个差别，那就是f2会接收到f1()返回的结果。
f1().then(f2) .then(f3);实例：图片加载下面是使用 Promise 完成图片的加载。
var preloadImage = function (path) { return new Promise(function (resolve, reject) { var image = new Image(); image.onload = resolve; image.onerror = reject; image.src = path; });};上面代码中，image是一个图片对象的实例。它有两个事件监听属性，onload属性在图片加载成功后调用，onerror属性在加载失败调用。
上面的preloadImage()函数用法如下。
preloadImage('https://example.com/my.jpg') .then(function (e) { document.body.append(e.target) }) .then(function () { console.log('加载成功') })上面代码中，图片加载成功以后，onload属性会返回一个事件对象，因此第一个then()方法的回调函数，会接收到这个事件对象。该对象的target属性就是图片加载后生成的 DOM 节点。
小结Promise 的优点在于，让回调函数变成了规范的链式写法，程序流程可以看得很清楚。它有一整套接口，可以实现许多强大的功能，比如同时执行多个异步操作，等到它们的状态都改变以后，再执行一个回调函数；再比如，为多个回调函数中抛出的错误，统一指定处理方法等等。
而且，Promise 还有一个传统写法没有的好处：它的状态一旦改变，无论何时查询，都能得到这个状态。这意味着，无论何时为 Promise 实例添加回调函数，该函数都能正确执行。所以，你不用担心是否错过了某个事件或信号。如果是传统写法，通过监听事件来执行回调函数，一旦错过了事件，再添加回调函数是不会执行的。
Promise 的缺点是，编写的难度比传统写法高，而且阅读代码也不是一眼可以看懂。你只会看到一堆then，必须自己在then的回调函数里面理清逻辑。
微任务Promise 的回调函数属于异步任务，会在同步任务之后执行。
new Promise(function (resolve, reject) { resolve(1);}).then(console.log);
console.log(2);// 2// 1上面代码会先输出2，再输出1。因为console.log(2)是同步任务，而then的回调函数属于异步任务，一定晚于同步任务执行。
但是，Promise 的回调函数不是正常的异步任务，而是微任务（microtask）。它们的区别在于，正常任务追加到下一轮事件循环，微任务追加到本轮事件循环。这意味着，微任务的执行时间一定早于正常任务。
setTimeout(function() { console.log(1);}, 0);
new Promise(function (resolve, reject) { resolve(2);}).then(console.log);
console.log(3);// 3// 2// 1上面代码的输出结果是321。这说明then的回调函数的执行时间，早于setTimeout(fn, 0)。因为then是本轮事件循环执行，setTimeout(fn, 0)在下一轮事件循环开始时执行。
参考链接Sebastian Porto, Asynchronous JS: Callbacks, Listeners, Control Flow Libs and PromisesRhys Brett-Bowen, Promises/A+ - understanding the spec through implementationMatt Podwysocki, Amanda Silver, Asynchronous Programming in JavaScript with “Promises”Marc Harter, Promise A+ ImplementationBryan Klimt, What’s so great about JavaScript Promises?Jake Archibald, JavaScript Promises There and back againMikito Takada, 7. Control flow, Mixu's Node book