vue下使用es6的Promise构造函数,实现函数的异步操作执行的成功及失败的回调

vue下使用es6的Promise构造函数,实现函数的异步操作执行的成功及失败的回调避免函数的层层嵌套

/修改run_a的一步操作可能存在拒绝状态
    function run_a(){
        return new Promise(function(resolve, reject){
            setTimeout(function(){
                if(Math.random()>.5){
                    resolve("step1");
                }else{
                    reject("error");
                }
            },1000);
        });
    }

    //这样做不会中断
    run_a().then(function(data){
        return run_b(data);
    },function(data){
        //如果是这样处理rejected状态,并不会中断调用链
        return data;
    }).then(function(data){
        return run_c(data);
    }).then(function(data){
        console.log(data);
    });

    //在调用链的末尾加上catch方法,当某个环节的Promise的异步处理出错时,将中断其后的调用,直接跳到最后的catch
    run_a().then(function(data){
        return run_b(data);
    }).then(function(data){
        return run_c(data);
    }).then(function(data){
        console.log(data);
    }).catch(function(e){
        //rejected的状态将直接跳到catch里,剩下的调用不会再继续
        console.log(e);
    });

 

 

 

 

使用 async / await, 搭配 promise, 可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性.

使用 async function 可以定义一个 异步函数, 语法为:

async function name([param[, param[, ... param]]]) { statements }
async 函数的返回值很特殊: 不管在函数体内 return 了什么值, async 函数的实际返回值总是一个 Promise 对象
 

 参考:https://blog.csdn.net/juhaotian/article/details/78934097

你可能感兴趣的:(vue下使用es6的Promise构造函数,实现函数的异步操作执行的成功及失败的回调)