promise的使用

最新推荐文章于 2024-07-28 21:06:01 发布

开水没有冬天

最新推荐文章于 2024-07-28 21:06:01 发布

阅读量192

点赞数

CC 4.0 BY-SA版权

分类专栏： es6 rxjs

本文链接：https://blog.youkuaiyun.com/weixin_42995876/article/details/86595852

es6 同时被 2 个专栏收录

13 篇文章

订阅专栏

rxjs

6 篇文章

订阅专栏

本文深入解析Promise对象的概念，包括其三种状态：pending、fulfilled和rejected，以及如何使用Promise解决异步编程中的回调地狱问题。文章还介绍了Promise的静态方法如all和race，以及如何通过then和catch方法处理异步操作的成功和失败。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：
https://www.cnblogs.com/whybxy/p/7645578.html

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

控制台打印Promise，看看这个对象都有什么：

从它的结构上看，关于promise需要知道几点：

1、Promise函数有一些静态（类）方法（all，race，reject，resolve等），函数本身可以调用

2、它的原型对象上有catch，then等，也就是说这两个方法需要在它实例上调用。

简单使用：

var p = new Promise(function(resolve, reject){
    console.log("promise立即是执行了的");
    //做一些异步操作
    setTimeout(function(){
        console.log('执行完成');
        // resolve('随便什么数据111');   // 由pending状态到fullfiled状态
        reject("qqqq");  // 由pending状态到reject状态
    }, 2000);
}).then(
    (data)=>{  // resolve
        console.log("then里面的data：",data);
    },
    (err)=>{  // reject
        console.log("then里面的err：",err);
    }
)

注：new Promise()的时候，里面内容直接就执行了（所以要用函数包装起来，用的时候再调用，即执行接口）

解决的问题：就是在异步里面执行了一个回调函数！！！！eg：

// 异步接口：
function runAsync() {
    var p = new Promise(function (resolve,reject) {
        // 异步操作
        setTimeout(function(){
            console.log("执行完成");
            callback('success的数据');
        },2000)
    });
    return p;
}
// 回调函数：
function callback(data) {
    console.log(data);
}
runAsync(); // 调用

promise的写法：

function runAsync() {
    var p = new Promise(function (resolve, reject) {
        // 异步操作
        setTimeout(function () {
            console.log("执行完成");
            resolve("success的数据");
        }, 2000)
    });
    return p;
}
runAsync().then(    
    (data) => {
        console.log("then里面的resolve打印：", data);
    },
    (err)=>{
        console.log("then里面的reject打印：", err);
    }
)

连续回调使用回调函数的写法：

function runAsync1() {
    setTimeout(function () {
        console.log("异步操作111完成");
        fn1('异步111的res');
    }, 1000)
}
function fn1(data) {
    console.log("传递过来的参数111：", data);
    setTimeout(function () {
        console.log("异步操作222完成");
        fn2("异步222的res")
    }, 2000)
}
function fn2(data) {
    console.log("传递过来的参数222：",data);
    setTimeout(function () {
        console.log("异步操作333完成");
        fn3("异步333的res")
    }, 2000)
}
function fn3(data) {
    console.log("传递过来的参数333：",data);
}
runAsync1();

或者层层嵌套的问题：

async1(function(){
    async2(function(){
        async3(function(
            async4(funciton(){
                async5(function(){
                    //(╯°°）╯︵┻━┻
                    //...
                });
            });
        )); 
    });
});

promise写法：

function runAsync1() {
    var p=new Promise(function (resolve,reject) {
        setTimeout(function(){
            console.log("异步操作111完成");
            resolve('异步111的res');
        },1000)
    })
    return p;
}
function runAsync2() {
    var p= new Promise(function (resolve,reject) {
        setTimeout(function () {
            console.log("异步操作222完成");
            resolve("异步222的res")
        },2000)
    });
    return p;
}
function runAsync3() {
    var p= new Promise(function (resolve,reject) {
        setTimeout(function () {
            console.log("异步操作333完成");
            resolve("异步333的res")
        },2000)
    });
    return p;
}
runAsync1()
    .then(function (data) {
        console.log("传递过来的参数111：",data);
        return runAsync2(); // 返回promise对象，可以继续then方法
    })
    .then(function (data) {
        console.log("传递过来的参数222：",data);
        return runAsync3();
    })
    .then(function (data) {
        console.log("传递过来的参数333：",data);
    })

promise使用：

function getNumber() {
    var p = new Promise(function (resolve, reject) {
        setTimeout(function () {
            var num=Math.ceil(Math.random()*10);
            console.log(num);
            if(num<=5){
                resolve(num);
            }else {
                reject('数字太大了');
            }
        }, 2000)
    })
    return p;
}
getNumber()
    .then(
        function (data) {
            console.log("resolve：",data);
        },
        function (err) {
            console.log("reject：",err);
        }
    )

Promise对象除了then方法，还有一个catch方法，它是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调

效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中；eg：

function getNumber() {
    var p = new Promise(function (resolve, reject) {
        setTimeout(function () {
            var num=Math.ceil(Math.random()*10);
            console.log(num);
            if(num<=5){
                resolve(num);
            }else {
                reject('数字太大了');
            }
        }, 2000)
    })
    return p;
}
getNumber()
    .then(
        function (data) {
            console.log("resolve：",data);
            console.log(somedata);  // 此处的somedata未定义 => 故：应该报错
        },
        function (err) {
            console.log("reject：",err);
        }
    )
    .catch(function (reason) {
        console.log("catch:",reason); // catch: ReferenceError: somedata is not defined
    })

all的用法

Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

function runAsync1() {
    var p=new Promise(function (resolve,reject) {
        setTimeout(function(){
            console.log("异步操作111完成");
            resolve('异步111的res');
        },1000)
    })
    return p;
}
function runAsync2() {
    var p= new Promise(function (resolve,reject) {
        setTimeout(function () {
            console.log("异步操作222完成");
            resolve("异步222的res")
        },2000)
    });
    return p;
}
function runAsync3() {
    var p= new Promise(function (resolve,reject) {
        setTimeout(function () {
            console.log("异步操作333完成");
            resolve("异步333的res")
        },2000)
    });
    return p;
}
// 使用的是Promise，注意啦。
Promise
    .all([runAsync1(),runAsync2(),runAsync3()])
    .then(function (data) {
        console.log("传递过来的参数111：",data);
        console.log('init函数开始执行');   // init函数开始执行
    })
// 打印的结果：
异步操作111完成     // 1s打印
异步操作222完成     // 2s打印
异步操作333完成     // 2s打印
传递过来的参数111： (3) ["异步111的res", "异步222的res", "异步333的res"]

race的用法

all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，这就是race方法，这个词本来就是赛跑的意思。

function runAsync1() {
    var p=new Promise(function (resolve,reject) {
        setTimeout(function(){
            console.log("异步操作111完成");
            resolve('异步111的res');
        },1000)
    })
    return p;
}
function runAsync2() {
    var p= new Promise(function (resolve,reject) {
        setTimeout(function () {
            console.log("异步操作222完成");
            resolve("异步222的res")
        },2000)
    });
    return p;
}
function runAsync3() {
    var p= new Promise(function (resolve,reject) {
        setTimeout(function () {
            console.log("异步操作333完成");
            resolve("异步333的res")
        },2000)
    });
    return p;
}
Promise
    .race([runAsync1(),runAsync2(),runAsync3()])
    .then(function (data) {
        console.log("传递过来的参数111：",data);
        console.log('init函数开始执行');
    })
// 执行结果：
异步操作111完成
传递过来的参数111： 异步111的res
init函数开始执行
异步操作222完成
异步操作333完成