ES6学习笔记九：promise对象

promise 承诺 相当于一个容器，保存着将来才会结束的事件(异步操作)的结果。

特点：

1.对象的状态不受外界影响，处理异步操作三个状态：pending进行中，结果：（resolved成功、rejected失败）。状态改变方向：

pending-->resolved // .then()来获得成功的结果

pending-->rejected //.catch()来获得失败的结果

2.一旦有了结果，就不会改变，任何时候都可以得到这个结果。

1.promise基本用法

		let promi = new Promise(function(resolved, rejected) {
            let res = {
                code: 200,
                data: {
                    name: 'hattie'
                },
                error: '失败了'
            }
            setTimeout(() => {
                if (res.code === 201) {
                    resolved(res.data);
                } else {
                    rejected(res.error);
                }
            }, 1000);
        })

        promi.then((val) => {
            console.log(val);
        }, (err) => {
            console.log(err);
        });

        //封装一个函数，返回一个promise对象
        function timeOut(ms) {
            return new Promise((resolved, rejected) => {
                setTimeout(() => {
                    resolved('成功');
                }, ms);
            });
        }

        //链式调用
        timeOut(1000).then((val) => {
            console.log(val);
        }, (err) => {
            console.log(err);
        });

2.resolve() reject() 将任何对象转换成Promise对象

//resolve() reject() 将任何对象转换成Promise对象
        let p = Promise.resolve('foo');
        p.then(data => {
            console.log(data);
        });

        let p1 = Promise.reject('foo1');
        p1.catch(error => {
            console.log(error);
        });

3.all()所有promise内容都加载完成，共荣辱 一致性，一个失败则失败

 //all() 所有promise内容都加载
        let p2 = new Promise((res, rej) => {});
        let p3 = new Promise((res, rej) => {});
        let p4 = new Promise((res, rej) => {});

        let p5 = Promise.all([p2, p3, p4]);
        p5.then(() => {
            //all()中的所有执行都成功 才成功
        }).catch(
            () => {
                //如果有一个失败则失败
            }
        );

4.race() 多个promise赛跑，谁先有返回结果先执行谁，后面的不执行

应用：给异步请求设置超时时间，并在超时后执行相应的操作

        function requestImg(imgSrc) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.onload = function() {
                    resolve(img);
                }
                img.src = imgSrc;
            });
        }

        function timeout() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject('图片加载失败');
                }, 3000);
            });
        }
        const imgSrc = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596386704970&di=b5e72090a915ce678fad510b273a571d&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg";
        Promise.race([requestImg(imgSrc), timeout()]).then(data => {
            document.body.appendChild(data);
            console.log(data);
        }).catch(error => {
            console.log(error);
        });