美文网首页
趣谈ES6:promise的神奇之处?

趣谈ES6:promise的神奇之处?

作者: 前端小帅 | 来源:发表于2020-06-17 00:11 被阅读0次

    趣谈ES6:promise的神奇之处?

    众所周知,在js的世界中,所有的代码都是同步执行的,而在js在进行网络操作,浏览器实践,任务队列时,就导致很多代码必须要进行回调,出现回调地狱。

    AJAX就是典型的异步操作。

    Promise则是异步编程的一种解决方案,它有两个特点:1、对象的状态不受外界影响,2、状态改变是不可逆不可改变。

    Promise一共有三种状态,分别为:Pending(进行中),Resolved(已完成),Reject(已失败),初始状态为pending,如果成功则resolved,如果失败测reject。

    基本用法

    let promise = new Promise((resolve,reject) =>{resolve()}).then(res=>{console.log(res)})
    

    Promise构造函数接收一共函数作为参数,该函数有两个参数分别为resolve和reject,调用resolve则会代表成功,调用reject则会代表失败。

    then方法

    function greet(){
        let promise = new Promise ((resolve,reject)=>{
            let data = 'hello world'
            resolve(data)
    })
        return promise
    }
    greet().then(res=>{console.log(res)})
    
    

    then方法是处理resolve和reject的回调,分别有两个参数,参数分别是(resolve)=>{},(reject)=>{}。then方法的返回值也是一个promise,因此可以不断的进行链式调用then方法。

    all方法

    Promise的all方法提供了并行执行异步操作的能力,它可以将promise数组作为参数,只有当时所有promise都成功后,才会获取到成功结果,否则会报错。

    function p1(){
        var promise1 = new Promise(function(resolve,reject){
            console.log("p1的第一条输出语句");
            resolve("p1完成");
        })
        return promise1;
    }
    function p2(){
        var promise2 = new Promise(function(resolve,reject){
            console.log("p2的第一条输出语句");
             resolve("p2完成");
        })
        return promise2;
    }
    function p3(){
        var promise3 = new Promise(function(resolve,reject){
            console.log("p3的第一条输出语句");
            resolve("p3完成")
        });
        return  promise3;
    }
    
    Promise.all([p1(),p2(),p3()]).then(function(data){
        console.log(data);
    })  
    
    打印结果:
        p1的第一条输出语句
        p2的第一条输出语句
        p3的第一条输出语句
        ['p1完成','p2完成','p3完成']
    

    race方法

    在all中的回调函数中,等到所有的Promise都执行完,再来执行回调函数,race则不同它等到第一个Promise改变状态就开始执行回调函数。

    function p1(){
        var promise1 = new Promise(function(resolve,reject){
            resolve("p1完成");
        })
        return promise1;
    }
    function p2(){
        var promise2 = new Promise(function(resolve,reject){
             reject("p2失败");
        })
        return promise2;
    }
    
    Promise.race([p1(),p2(),p3()]).then(function(data){
        console.log(data);
    })  
    打印结果:
        p1完成
    

    相关文章

      网友评论

          本文标题:趣谈ES6:promise的神奇之处?

          本文链接:https://www.haomeiwen.com/subject/qczdxktx.html