ES6 Promise对象&Async 初始用

首先 阮老师机票http://es6.ruanyifeng.com/#docs/promise
1. 含义：
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。promise是用来解决异步回调问题的，主要用来解决回调地狱（回调噩梦）,异步回调，解决异步问题
2.特点：
（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功resolve）和rejected（已失败reject）。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。
注：为了方便，将resolved统一只指fulfilled状态，不包含rejected状态。
3. 缺点
（1）无法取消Promise，一旦新建它就会立即执行，无法中途取消。
（2）如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
（3）当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完

基本用法

• ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
resolve返回成功后的结果
reject返回失败后的结果

• Promise.prototype.then()
  then方法返回的是一个新的Promise实例，返回成功的数据（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
  接收解决回调噩梦，存在依赖关系，依赖上一次的变量，第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

setTimeout(() => {
            console.log(1);
            setTimeout(() => {
                console.log(2);
                setTimeout(() => {
                    console.log(3);
                }, 1000);
            }, 1000);
        }, 1000);

示例：回调噩梦，每隔一秒输出数字1=>2=>3,如果中间逻辑很多不好处理

promise解决数据传输问题、回调噩梦

function timer(msg) {
            var p = new Promise(function(resolve, reject) {
                setTimeout(() => {
                    resolve(msg);
                }, 1000);
            });
            return p;
        }
        timer('1')
            .then(function(res) {
                console.log(res);
                return timer('2');
            })
            .then(function(res) {
                console.log(res);
                return timer('3');
            })
            .then(function(res) {
                console.log(res);
            })
            .catch(function(err) {
                console.log(err);
            });

• Promise.prototype.catch()
  注意：
  （1）then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。
  （2）不要在then方法里面定义 Reject 状态的回调函数（即then的第二个参数）。
  用于指定发生错误时的回调函数。

  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误！', error);
});

ajax示例

const KEMU_1 = 'kemu1';
const KEMU_4 = 'kemu4';

function Http() {
    this.kemu = function(kemu, { page = 1, size = 10 } = {}) {
        var p = new Promise(function(resolve, reject) {
            $.ajax({
                type: 'GET',
                url: 'http://www.bestqingshan.top/demo/Juhe.php',
                data: {
                    url: 'http://apicloud.mob.com/tiku/' + kemu + '/query',
                    param: {
                        key: '2a6bb26044286',
                        page,
                        size,
                    },
                },
                dataType: 'json',
                success: function(response) {
                    resolve(response);
                },
                error: function(err) {
                    reject(err);
                },
            });
        });
        return p;
    };
    this.kemu1 = function(page, callback) {
        this.kemu(KEMU_1, { page })
            .then(function(rst) {
                callback(JSON.parse(rst.data));
            })
            .catch(function(err) {
                console.log(err);
            });
    };
    this.kemu4 = function(page, callback) {
        this.kemu(KEMU_4, { page })
            .then(function(rst) {
                callback(JSON.parse(rst.data));
            })
            .catch(function(err) {
                console.log(err);
            });
    };
}

promise all（）和promise race（）

1. 作用：Promise.all方法和promise race方法用于将多个 Promise 实例，包装成一个新的 Promise 实例

2.

const p = Promise.all([p1, p2, p3]);

Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。
p的状态由p1、p2、p3决定，分成两种情况。
（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数
3.

const p = Promise.race([p1, p2, p3]);

Promise.race方法的参数与Promise.all方法一样
只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

function promise(time, msg) {
            var p = new Promise(function(resolve, reject) {
                // 异步回调
                setTimeout(() => {
                    resolve({ code: 200, msg });
                }, time);
            });
            return p;
        }
        let p1 = promise(5000, '第一步');
        let p2 = promise(3000, '第二步');
        Promise.all([p2, p1]).then(function(res) {
            console.log(res);
        });
        Promise.race([p1, p2]).then(function(res) {
            console.log(res);
        });

all
race

async函数

1. 含义：async...await是基于promise的generator语法糖。
2. 改进：
（1）内置执行器：自带函数执行器
（2）更好的语义：async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。
（3）更广的适用性：而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。
（4）返回值是 Promise：async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。
3. 基本用法：async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

async...await：等待异步回调方法执行完毕后，再执行后续的代码；也就是说被async修饰的函数且被await等待的函数执行会中断暂停;!!!注意，await必须出现在async修饰的函数中，否则会报错

示例

async function f(callback) {
            // await在修饰常规函数的时候，没有等待的过程，直接执行过去；
            // await normal();
            // 回调函数处理的时候会当做普通函数去对待
            // await callback(function() {
            //  console.log('回调来了');
            // });
            // console.log('helloworld');
            // await会中断暂停，等待promise执行完毕后才执行后续代码
            try {
                var rst = await promise(); //返回的是resolve中所携带的数据
                console.log(rst);
                // callback(rst);
                // return rst;
            } catch (error) {
                console.log(error);
                // callback(error);
                // return error;
            }
            var rst = await promise(); //返回的是resolve中所携带的数据
            // callback(rst);
            return rst;
        }
        function f1() {
            promise()
                .then(function(res) {})
                .catch(function(err) {});
        }

（1）一般而言，async...await用于等待promise的结果。
（2）try里面处理resolve的结果。
（3）promise()方法是一个有promise对象返回的函数；await就会进入中断暂停状态，只有当promise状态变为fulfilled或rejected之后才会继续执行后续代码。
（4）catch里面处理reject的结果。
（5）return 不能直接return结果集，因为return 的对象默认是promise的resolve数据；当前f方法返回的是一个promise对象。