为了转生而点技能-JavaScript，day23(Promise介绍

Promise：适用于非同步的运算上。

本身就是建构函式

console.log(Promise);     //ƒ Promise() { [native code] }

利用chrome可以观测到Promise的状态，分为pending、fulfilled、rejected，状态不会同时存在。
搁置（pending）：初始状态。
实现（fulfilled）：表示操作成功地完成，透过then() 来接续后续的动作。
拒绝（rejected）：表示操作失败了，透过catch() 来接续后续的动作。。

        const a = new Promise(function (resolve, reject) { });        console.log(a);

fulfilled：

        const a = new Promise(function (resolve, reject) { return resolve('success') });        console.log(a);                               //Promise {<fulfilled>: 'success'}        a.then((param) => { console.log(param) });    //success，param只是用来接收fulfilled的

rejected：

        const a = new Promise(function (resolve, reject) { return reject('fail') });        console.log(a);                               //Promise {<rejected>: 'fail'}        a.catch((param) => { console.log(param) });   //fail，param只是用来接收rejected的

        const a = function promiseFn(num) {            return new Promise(function (resolve, reject) {                setTimeout(function () {                    if (num) {                        resolve('real');                    }                    else {                        reject('empty');                    }                }, 10);            })        }        a(1)            .then((param) => console.log(param));   //real                                                                    function promiseFn(num) {            return new Promise(function (resolve, reject) {                setTimeout(function () {                    if (num) {                        resolve('real');                    }                    else {                        reject('empty');                    }                }, 10);            })        }        promiseFn(0)            .then((param) => console.log('sucess ' + param))            .catch((param) => console.log('false ' + param) //false empty

.then跟.catch可以合併撰写，表示如下：

            promiseFn(0)            .then((param) => { console.log('sucess ' + param) },                  (param) => { console.log('false ' + param) }); //false empty

---

3.Promise chain：可以依序且依照不同结果，呼叫两个以上的非同步函数。

        function promiseFn(num) {            return new Promise(function (resolve, reject) {                setTimeout(function () {                    if (num) {             //参数为真值时                        resolve('real');                    }                    else {                 //参数为假值时                        reject('empty');                    }                }, 10);            })        }                        promiseFn(0)                           //参数为假值，为reject状态            .then((param) => {                console.log('sucess ' + param)                return promiseFn(1)            },                (param) => {                   //接收reject状态时的参数                    console.log('false ' + param)                    return promiseFn(2)        //回传参数2给PromiseFn判断，为真值，为fulfilled状态                })            .then((param) => {                 //接收fulfilled状态时的参数                console.log('sucess ' + param)                return promiseFn(0)            //回传参数0给PromiseFn判断            },                (param) => {                    console.log('false ' + param)                    return promiseFn(1)                })            .then((param) => {                console.log('sucess ' + param)            },                (param) => {                    console.log('false ' + param)                })

---

入门级Promise用法:
1.Promise.all：会依据给定不同的时间点执行且执行结果为fulfilled后，并再传给.then后统一执行后续；如果途中有任一结果为rejected，就会直接找.catch执行后续。

        function promiseFn(num, time = 500) {            return new Promise(function (resolve, reject) {                setTimeout(function () {                    if (num) {                        resolve(`real ${num}`);                    }                    else {                        reject('empty');                    }                }, time);            });        }                        Promise.all([            promiseFn(1, 1000),            promiseFn(2, 2000),            promiseFn(3, 3000),        ])            .then((param) => { console.log(param) })   //(3) ['real 1', 'real 2', 'real 3']            .then((param) => { console.log(param[0], param[1], param[2])})//real 1 real 2 real 3

2.Promise.race：会依据给定不同的时间点执行且执行结果为fulfilled后，且只会将第一个执行完毕的结果传给.then后执行后续；如果有任一执行结果为rejected，则依照次序决定是否呈现fulfilled的后续结果或是呈现为rejected的后续结果。
皆为fulfilled

        function promiseFn(num, time = 500) {            return new Promise(function (resolve, reject) {                setTimeout(function () {                    if (num) {                        resolve(`real ${num}`);                    }                    else {                        reject('empty');                    }                }, time);            });        }        Promise.race([            promiseFn(1, 1000),            promiseFn(2, 20),            promiseFn(3, 3000),        ])            .then((param) => { console.log(param) })    //real 2，因为只会呈现promiseFn(2, 20)

任一为rejected

        function promiseFn(num, time = 500) {            return new Promise(function (resolve, reject) {                setTimeout(function () {                    if (num) {                        resolve(`real ${num}`);                    }                    else {                        reject('empty');                    }                }, time);            });        }        Promise.race([            promiseFn(0, 1000),            promiseFn(2, 20),            promiseFn(3, 3000),        ])            .then((param) => { console.log(param) })    //real 2，promiseFn(2, 20)次序最前            .catch((param) => { console.log(param) })

        function promiseFn(num, time = 500) {            return new Promise(function (resolve, reject) {                setTimeout(function () {                    if (num) {                        resolve(`real ${num}`);                    }                    else {                        reject(`empty ${num}`);                    }                }, time);            });        }        Promise.race([            promiseFn(1, 1000),            promiseFn(0, 20),            promiseFn(3, 3000),        ])            .then((param) => { console.log(param) })            .catch((param) => { console.log(param) })   //empty 0，因为promiseFn(0, 20)次序靠前