1、promise相关

回调方法：就是将一个方法func2作为参数传入另一个方法func1中，当func1执行到某一步或者满足某种条件的时候才执行传入的参数func2

Promise 是 ES6 引入的异步编程的新解决方案。

Promise 对象三种状态：初始化、成功、失败 pending-进行中、resolved-已完成、rejected-已失败

就好像，你跟你女朋友求婚，她跟你说她要考虑一下，明天才能给你答案，这就是承诺（promise）。同时，这也是一个等待的过程（pending），然后你就等，等到明天你女朋友给你答复，同意（resolved）或者拒绝（rejected），如果同意就准备结婚了，如果不同意就等下次再求婚，哈哈哈。

promise是用来解决两个问题的：

• 回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象
• promise可以支持多个并发的请求，获取并发请求中的数据
• 这个promise可以解决异步的问题，本身不能说promise是异步的

基本用法：

let p = new Promise((resolve, reject) => {      //    调用了Promise构造函数
  // 做一些事情
  // 然后在某些条件下resolve，或者reject
  if (/* 条件随便写^_^ */) {
    resolve()
  } else {
    reject()
  }
})

p.then(() => {                                 //    调用了promise实例的.then方法
    // 如果p的状态被resolve了，就进入这里
}, () => {
    // 如果p的状态被reject
})

上面这样构造promise实例，然后调用.then.then.then的编写代码方式，就是promise。

A、声明一个Promise对象

new Promise((resolve, reject) => {     // 这两个方法主要是用来修改状态的
    console.log("开始求婚。")
    console.log("。。。。。")
    console.log("考虑一下。")
    setTimeout(() => {
        if (isHandsome || isRich) { // 当我们调用 resolve 函数的时候，Promise 的状态就变成 resolved
            resolve('我同意！')
        } else { // 当我们调用 reject 函数的时候，Promise 的状态就变成 reject
            reject("拒绝：我们八字不合")
        }
    }, 2000)
})
// 如果一个 promise 已经被兑现（resolved）或被拒绝（rejected），那么我们也可以说它处于已敲定（settled）状态。

B、 Promise.prototype.then 方法；

已成功resolved的回调和已失败rejected的回调

// 调用 Promise 对象的then方法，两个参数为函数
p.then(function(value){ // 成功
     console.log(value);
}, function(season){ // 失败
     console.log(season);
});

getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});

C、 Promise.prototype.catch 方法；

.catch()的作用是捕获Promise的错误

其实它和then的第二个参数一样，用来指定reject的回调，用法是这样：

在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。请看下面的代码：

promise.then(
    () => { console.log('this is success callback') }
).catch(
    (err) => { console.log(err) }
)

效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。请看下面的代码：

getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
    console.log(somedata);  //此处的somedata未定义
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});

D、all的用法

有了all，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据。

「谁跑的慢，以谁为准执行回调」

Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。

• 三个异步操作返回的数据哪里去了呢？
• 都在then里面呢，all会把所有异步操作的结果放进一个数组中传给then，就是上面的results。

举个栗子：有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。

E、race的用法

• 「谁跑的快，以谁为准执行回调」
• 1秒后runAsync1已经执行完了，此时then里面的就执行了
• 在then里面的回调开始执行时，runAsync2()和runAsync3()并没有停止，仍旧再执行。
• 于是再过1秒后，输出了他们结束的标志。

//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = 'xxxxxx';
    });
    return p;
}

//延时函数，用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。

终极小栗子 —— 球球让我求婚成功吧

let count = 0

const propose = () => {
    return new Promise((resolve, reject) => {
        console.log("开始求婚。")
        console.log("。。。。。")
        console.log("考虑一下。")
        setTimeout(() => {
            if (count < 3) {
                reject("拒绝：我们八字不合")
                count++
            } else {
                resolve('我同意！')
            }
        }, 2000)
    })
}

const startPropose = () => {
    propose()
        .then((result) => {
            console.log(result)
            console.log("完结撒花")
            console.log("、·、·、、·、·、·、")
        },)
        .catch((e) => {
            {
                console.error(e)
                console.log("被拒绝了，下次再求婚。")
                setTimeout(() => {
                    startPropose()
                }, 3000)
            }
        })
}

startPropose()