promise是什么？

主要用于异步计算
可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
可以在对象之间传递和操作promise，帮助我们处理队列

promise详解

创建promise

Promise解决：

通过.then的方式，拿到Promise内部的异步操作的结果,并且不阻塞和Promise不相关的任何程序，让它们同步执行;

then 函数会返回一个 Promise 实例，并且该返回值是一个新的实例而不是之前的实例。因为 Promise 规范规定除了 pending 状态，其他状态是不可以改变的，如果返回的是一个相同实例的话，多个 then 调用就失去意义了。对于 then 来说，本质上可以把它看成是 flatMap；

Promise的状态(生命周期)：

padding：进行中
fulfilled：已完成
rejected：已失败

异步任务的完成与否取决于当前 Promise的状态

1.异步任务完成 调用resolve()成功回调状态：padding -> fulfilled

2.异步任务失败 调用reject()失败回调状态：padding -> rejected

创建promise方法

Promise() 创建一个新的 Promise 对象。该构造函数主要用于包装还没有添加 promise 支持的函数。

const myFirstPromise = new Promise((resolve, reject) => {
  // ?做一些异步操作，最终会调用下面两者之一:
  //
  //   resolve(someValue); // fulfilled
  // ?或
  //   reject("failure reason"); // rejected
});

Promise的特点：

1.Promise的状态不受外界的影响;

因为Promise代表的是异步操作，只有异步操作成功或者或者失败，才会改变* Promise的状态;

2.Promise的状态一旦改变就无法更改;

一旦状态固化，返回的结果在任何地方都调用的到;

Promise的执行方式：

微任务的方式执行Promise注册上回调函数，不管是成功还是失败都可以; 微任务：相当于高速中的紧急车道，可以让微任务快速排在异步队列的最前方，等待主线程通过事件轮询将其调用;

Promise 原型方法

Promise.prototype.then()： then() 方法可以处理 Promise 被接受或拒绝的情况。
Promise.prototype.catch()： catch() 方法用来处理 Promise 被拒绝的情况，相当于 then(undefined, onRejected)
Promise.prototype.finally()：finally()方法在 promise 结束时，无论结果是 fulfilled 或者是 rejected，都会执行的回调函数

/*
 * Promise.prototype
 *    then: 设置成功或者失败后执行的方法（成功或者失败都可以设置，也可以只设置一个）
 *       pro.then([success], [error])
 * 		 pro.then([success])
 *       pro.then(null, [error])
 *    catch: 设置失败后执行的方法
 *    finally: 设置不论成功还是失败都会执行的方法（一般不用）
 */
 
new Promise(function (resolve, reject) {
console.log('我是Promise的同步回调函数');
    //异步任务
          $.ajax({ 
            url:'./data.json',
            success:function (data) {
              // console.log(data)
              resolve(data) // 成功
            },
            error:function (err) {
              reject(err) //失败
            }
          })

  }
).then(
  (res) => {
    console.log(res)
    console.log( simpleArray(res))
  },  // 成功
  (err) => {console.log(err)} // 失败
).catch(error => {
  console.log('失败: ' + error);
}).finally(x => {
  console.log('哈哈');
});

 console.log('我是同步代码')

function simpleArray (data) {
    return data.map(function (item) {
     // console.log(item)
       return item.name
    })
 }
 
 // 我是Promise的同步回调函数
// 我是同步代码
// ["zhangsan", "lisi", "wangwu"]
// 哈哈

Promise的静态方法：

Promise.resolve(value):返回一个成功状态态的Promise，通过.then()注册成功的回调函数;
Promse.reject(value):返回一个失败状态的Promise，通过.catch()注册失败的回调函数;
Promise.all([p1,p2,p3]):只有当中的Promise对象全部成功，才会返回一个结果且是个数组;
Promise.race([p1,p2,p3]):返回其中一个运行最快的结果;
Promise.any([p1,p2,p3])：接收一个Promise对象的集合，当其中的一个 promise 成功，就返回那个成功的promise的值。

Promise.all()

//切菜
    function cutUp(){
        console.log('开始切菜。');
        var p = new Promise(function(resolve, reject){        //做一些异步操作
            setTimeout(function(){
                console.log('切菜完毕！');
                resolve('切好的菜');
            }, 1000);
        });
        return p;
    }

    //烧水
    function boil(){
        console.log('开始烧水。');
        var p = new Promise(function(resolve, reject){        //做一些异步操作
            setTimeout(function(){
                console.log('烧水完毕！');
                resolve('烧好的水');
            }, 1000);
        });
        return p;
    }

    Promise.all([cutUp(), boil()])
        .then((result) => {
            console.log('准备工作完毕');
            console.log(result);
        })
        
//开始切菜。
//开始烧水。
//Promise {<pending>}
//切菜完毕！
//烧水完毕！
//准备工作完毕
//["切好的菜", "烧好的水"]

Promise.race()

let p1 = new Promise(resolve => {
        setTimeout(() => {
            resolve('I\`m p1 ')
        }, 1000)
    });
    let p2 = new Promise(resolve => {
        setTimeout(() => {
            resolve('I\`m p2 ')
        }, 2000)
    });
    Promise.race([p1, p2])
        .then(value => {
            console.log(value)
        })
        
 //I`m p1

promise 兼容

使用 promise-polyfill 解决兼容性问题

promise-polyfill资源地址：www.npmjs.com/package/pro…

ES6 - promise