ES6 Promise的使用

栏目: JavaScript · 发布时间: 6年前

内容简介:首先,我们Promise作为替代回调函数执行,作为异步操作的处理方法之一,是解决JS异步执行时候回调函数嵌套回调函数这一问题的方法,它更简洁地控制函数执行流程一般promise有三种状态:pending(等待态),fulfiled(成功态),rejected(失败态);

首先,我们 为什么要用Promise 语法?

Promise作为替代回调函数执行,作为异步操作的处理方法之一,是解决JS异步执行时候回调函数嵌套回调函数这一问题的方法,它更简洁地控制函数执行流程

一般promise有三种状态:pending(等待态),fulfiled(成功态),rejected(失败态);

常见写法为:

let p =  new Promise(resolve, reject){}.then();

通常,我们处理异步请求,会使用回调函数嵌套回调函数

例如:

fn("a", function(a) {
    fn1("b", function(b) {
        fn2("c", function(c) {
            fn3("d", function(d) {
                alert("回调成功,结果为:"a+b+c+d")
            })
        })
    })
})

但我们发现这样写的代码可读性并不高

如果使用promise语法,则更加符合阅读习惯,只需要在then函数中写处理逻辑即可

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(2);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(3);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(4);
    });
}).then(function(val) {
    console.log(val);
});

运行结果为:

ES6 Promise的使用

接下来模拟在实际项目开发中,在异步请求完数据后处理数据的情况,我们在这里用settimeout来模拟异步请求

let mypromise = new Promise(function(resolve, reject){
    setTimeout(function(){
        resolve("成功!"); 
    }, 1000);
});
mypromise.then(function(successMessage){
    console.log(successMessage);
});

运行结果为:

ES6 Promise的使用

我们可以看到这里的“成功!”在运行一秒后执行

常用API

(1) new Promise

new Promise(function(resolve, reject){
});

(2) PromiseObj.then(resolveFn,rejectFn)

resolveFn:Promise对象成功的回调处理函数

rejectFn:Promise对象失败的回调处理函数

new Promise((resolve,reject)=>{

}).then((resolveData)=>{

},(rejectErr)=>{
    
})

(3) PromiseObj.catch()

new Promise((resolve,reject)=>{

}).catch(err=>{
    console.log(err)
})

(4)PromiseObj.resolve()

Promise.resolve(123).then(data=>{
    console.log(data)
})

以上所述就是小编给大家介绍的《ES6 Promise的使用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web ReDesign 2.0

Web ReDesign 2.0

Kelly Goto、Emily Cotler / Peachpit Press / 2004-12-10 / USD 45.00

If anything, this volume's premise--that the business of Web design is one of constant change-has only proven truer over time. So much so, in fact, that the 12-month design cycles cited in the last ed......一起来看看 《Web ReDesign 2.0》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

随机密码生成器
随机密码生成器

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试