解决异步问题——promise

promise介绍

• promise主要是为了解决嵌套回调的问题，使代码更加简洁，promise将嵌套的回调函数改成.then()的连缀使用

promise 的使用

• 方法：

  • 首先通过new Promise（function）创建一个promise对象，接收一个函数参数，并且在函数中传入resolve以及reject两个参数；

var p = new Promise(function(resolve, reject){      
            //做一些异步操作
            setTimeout(function(){
                console.log('这是一个异步操作');
                resolve('异步操作成功并且结束');
            }, 1000);
        });

API

• then() 接收两个函数，分别是对promise的resolve及reject状态处理的函数，并且处理结束之后返回promise对象

 function fn1() {
        console.log("第一个函数开始执行");
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log('第一个函数执行完毕');
                resolve('接下来进入第二个函数');
            }, 1000);
        });
        return p;
    }

    function fn2(data) {
        console.log(data);
        console.log('第二个函数开始执行');
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                var num = Math.ceil(Math.random() * 10); // 生成随机数
               console.log(num);
                //num = 0；设置num=0
                if (num === 0) {
                    console.log('第二个函数执行完毕');
                    resolve('所有函数执行完毕');
                }
                else{
                    reject("执行函数2失败");
                }
            }, 2000);
        });
        return p;
    }

    fn1()
        .then(function (data) {
            return fn2(data);
        })
        .then(function (data) {
            console.log(data);
        })

调用reject（）
设置num =0 调用resolve（）

• all() 接收一个函数数组，进行并发操作，并将每个函数的结果以数组的形式返回

function fn1() {
        console.log("第一个函数开始执行");
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log('第一个函数执行完毕');
                resolve('接下来进入第二个函数');
            }, 1000);
        });
        return p;
    }

    function fn2() {
        console.log('第二个函数开始执行');
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log('第二个函数执行完毕');
                resolve('所有函数执行完毕');
            }, 2000);
        });
        return p;
    }

    Promise.all([fn1(), fn2()])
        .then(function (resut) {
            console.log(resut);
        })

执行结果

• race()接收函数数组，函数先执行完成之后先进入下一个回调函数中

    function fn1() {
        console.log("第一个函数开始执行");
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log('第一个函数执行完毕');
                resolve('接下来进入第二个函数');
            }, 5000);
        });
        return p;
    }

    function fn2() {
        console.log('第二个函数开始执行');
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log('第二个函数执行完毕');
                resolve('所有函数执行完毕');
            }, 1000);
        });
        return p;
    }
    Promise.race([fn1(), fn2()])
        .then(function (resut) {
            console.log(resut);
        })

image.png

• catch() 当then中出现错误时不会中止整个函数，catch能够获取到错误并进行提示

function fn1() {
        console.log("第一个函数开始执行");
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log('第一个函数执行完毕');
                resolve('接下来进入第二个函数');
            }, 1000);
        });
        return p;
    }

    function fn2() {
        console.log('第二个函数开始执行');
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () {
                console.log('第二个函数执行完毕');
                resolve('所有函数执行完毕');
            }, 1000);
        });
        return p;
    }

     fn1()
         .then(function(data){
             console.log(errPart); //errPart没有定义
             return fn2(data);
         })
         .then(function (data) {
             console.log(data);
         })
         .catch(function (err) {
             console.log(err);
         })

执行结果

参考链接：
https://segmentfault.com/a/1190000009478377
https://www.cnblogs.com/whybxy/p/7645578.html
https://yangbo5207.github.io/wutongluo/ji-chu-jin-jie-xi-lie/shi-san-3001-promise.html