ES6——Promise详解

了解Promise首先要了解：JS中的两种编程思想即 同步、异步
JS是单线程的 --> JS就是一个傻子，脑子一根筋，做着当前的这件事情，没有完成之前，绝对不会做下一件事情
1、同步就是 --> 上一件事情没有完成，继续处理上一件事情，只有上一件事情完成了，才会做下一件事情 --> JS中大部分都是同步编程
2、异步 --> 规划要做一件事情，但是不是当前立马去执行这件事情，需要等一定的时间，这样的话，我们不会等着他执行，而是继续执行下面的操作
–> “只有当下面的事情都处理完成了，才会返回头处理之前的事情；如果下面的事情并没有处理完成，不管之前的事情有没有到时见，都踏踏实实的给我等着”

在JS中，异步编程只有四种情况：

–>定时器都是异步编程的
–> 所有的事件绑定都是异步编程的
–> Ajax读取数据都是异步编程的，我们一般设置为异步编程
–> 回调函数都是异步编程的

什么是Promise?

Promise是解决了许多异步编程的一种方案
试想一下，我们在小=初始状态下，又一个死数据，然后需要请求回来一个新的数据，这个时候如果等待肯能会造成页面停留初始数据，这个时候就要考虑用到promise
先来看看大打印的Promise是啥把～

console.log(Promise)
打印结果： ƒ Promise() { [native code] }

promise.png

这么一看就明白了，Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法!

Promise对象有以下两个特点。

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

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

var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
        console.log('执行完成');
        resolve('随便什么数据');
    }, 2000);
});

其执行过程是：执行了一个异步操作，也就是setTimeout，2秒后，输出“执行完成”，并且调用resolve方法。

注意！我只是new了一个对象，并没有调用它，我们传进去的函数就已经执行了，这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数，如：

 function aa(){
    var p = new Promise(function(resolve, reject){
      //做一些异步操作
      setTimeout(function(){
          console.log('执行完成');
          resolve('随便什么数据');
      }, 2000);
    });
    return p;
  }
  aa().then(function(data){
    console.log(data);//随便什么数据
  })

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);
    });

如果不会参考下列语法：
new Promise(
function (resolve, reject) {
// 一段耗时的异步操作
resolve('成功') // 数据处理完成
// reject('失败') // 数据处理出错
}).then(
(res) => {console.log(res)}, // 成功
(err) => {console.log(err)} // 失败)

最后来个面试题

 setTimeout(function(){
      console.log(1);
    },0)
    new Promise(function fn(resolve){
      console.log(2);
      for(var i=0;i < 10000;i++){
        i == 9999 && resolve();
      }
      console.log(3);
    }).then(function(){
      console.log(4);
    })
    console.log(5);