zoukankan      html  css  js  c++  java
  • ES6 promise 用法

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

    准备三个function备用:

    function runAsync1(){
        var p = new Promise(function(resolve, reject){
            //做一些异步操作
            setTimeout(function(){
                console.log('异步任务1执行完成');
                resolve('随便什么数据1');
            }, 3000);
        });
        return p;            
    }
    function runAsync2(){
        var p = new Promise(function(resolve, reject){
            //做一些异步操作
            setTimeout(function(){
                console.log('异步任务2执行完成');
                resolve('随便什么数据2');
            }, 1000);
        });
        return p;            
    }
    function runAsync3(){
        var p = new Promise(function(resolve, reject){
            //做一些异步操作
            setTimeout(function(){
                console.log('异步任务3执行完成');
                resolve('随便什么数据3');
            }, 2000);
        });
        return p;            
    }
    

      ---------------------------------------------

    从这里开始进入正题

    Promise定义:Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。

    Promise使用:

    function runAsync(){
        var p = new Promise(function(resolve, reject){
            //做一些异步操作
            setTimeout(function(){
                console.log('执行完成');
                resolve('随便什么数据');
            }, 2000);
        });
        return p;            
    }
    runAsync();
    

    Promise链式操作用法:

    runAsync1()
    .then(function(data){
        console.log(data);
        return runAsync2();
    })
    .then(function(data){
        console.log(data);
        return runAsync3();
    })
    .then(function(data){
        console.log(data);
    });
    

    Promise的then方法:接收两个function为参数,fn1的参数为resolve的数据,fn2的参数为reject的数据

    function getNumber(){
        var p = new Promise(function(resolve, reject){
            //做一些异步操作
            setTimeout(function(){
                var num = Math.ceil(Math.random()*10); //生成1-10的随机数
                if(num<=5){
                    resolve(num);
                }
                else{
                    reject('数字太大了');
                }
            }, 2000);
        });
        return p;            
    }
    
    getNumber()
    .then(
        function(data){
            console.log('resolved');
            console.log(data);
        }, 
        function(data){
            console.log('rejected');
            console.log(data);
        }
    );
    

    Promise的catch方法:方法一用来指定reject的回调 

    getNumber()
    .then(function(data){
        console.log('resolved');
        console.log(data);
    })
    .catch(function(data){
        console.log('rejected');
        console.log(data);
    });
    

      方法二捕捉then的的异常

    getNumber()
    .then(function(data){
        console.log('resolved');
        console.log(data);
        console.log(somedata); //此处的somedata未定义
    })
    .catch(function(data){
        console.log('rejected');
        console.log(data);
    });
    

    Promise的all方法:此方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。执行原则是谁跑的慢,以谁为准执行回调

    Promise
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then(function(results){
        console.log(results);
    });
    

    Promise的race方法:race的用法与all一样,但是执行原则是谁跑的块,以谁为准执行回调  

    //请求某个图片资源
    function requestImg(){
        var p = new Promise(function(resolve, reject){
            var img = new Image();
            img.onload = function(){
                resolve(img);
            }
            img.src = 'xxxxxx';
        });
        return p;
    }
    
    //延时函数,用于给请求计时
    function timeout(){
        var p = new Promise(function(resolve, reject){
            setTimeout(function(){
                reject('图片请求超时');
            }, 5000);
        });
        return p;
    }
    
    Promise
    .race([requestImg(), timeout()])
    .then(function(data){
        console.log(data);
    })
    .catch(function(data){
        console.log(data);
    });
    

      

  • 相关阅读:
    Python MySQL(SQL语句的补充3)
    Python MySQL(pymysql的使用day1)
    Python MySQL(SQL语句的补充2)
    Python MySQL(对外键使用方法的补充)
    Python MySQL(学习SQL语句)
    Python MySQL数据库的基本使用
    关于http响应内容压缩的一点小积累。
    同一账号,后一用户登录,前一个用户则被踢掉
    对序列化的学习。
    MySQL 函数积累
  • 原文地址:https://www.cnblogs.com/dadouF4/p/10190430.html
Copyright © 2011-2022 走看看