zoukankan      html  css  js  c++  java
  • es6之promise

    promise用于异步调用

    //基本用法

    let ajax=function(){
            console.log("执行");
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve()
                },1000)
            })
        }
        ajax().then(function(){
            console.log("promise","timeout");
        })
    

    //连续调用

    let ajax=function(){
            console.log("执行1");
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve()
                },1000)
            })
        }
        ajax()
            .then(function(){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve()
                },2000)
            })
            .then(function(){
                console.log("timeout3")
            })
    
        })
    

    //错误捕获

    let ajax=function(num){
            console.log("执行乐乐乐");
            return new Promise(function(resolve,reject){
                if(num>5){
                    resolve()
                }else{
                    throw Error("出错了");
                }
            })
        }
        ajax(6).then(function(){
            console.log("执行第二步");
        }).catch(function(err){
            console.log("catch",err);
        })
        ajax(1).then(function(){
            console.log("执行第二步");
        }).catch(function(err){
            console.log("catch",err);
        })
    

      

    实例

     //所有图片加载完再加载到页面
        function loadImg(src){
            return new Promise((resolve,reject)=>{
                let img=document.createElement("img");
                img.src=src;
                img.onload=function(){
                    resolve(img);
                }
                img.onerror=function(err){
                    reject(err);
                }
            })
        }
    
        function shopImgs(imgs){
            imgs.forEach(function(img){
                document.body.appendChild(img);
            })
        }
    
        Promise.all([
            loadImg("http://img.tgljweb.com/1720171108170301_tango_img"),
            loadImg("http://img.tgljweb.com/1720171112111533_tango_img"),
            loadImg("http://img.tgljweb.com/1720171104093842_tango_img"),
        ]).then(shopImgs)
    
    //当有一个图片加载完就显示在页面,即哪一张先加载出来,就显示哪一张
        function loadImg(src){
            return new Promise((resolve,reject)=>{
                let img=document.createElement("img");
                img.src=src;
                img.onload=function(){
                    resolve(img);
                }
                img.onerror=function(err){
                    reject(err);
                }
            })
        }
        function shopImgs(img){
            let p=document.createElement("p");
            p.appendChild(img);
            document.body.appendChild(p);
        }
    
        Promise.race([
            loadImg("http://img.tgljweb.com/1720171108170301_tango_img"),
            loadImg("http://img.tgljweb.com/1720171112111533_tango_img"),
            loadImg("http://img.tgljweb.com/1720171104093842_tango_img")
        ]).then(shopImgs)
    

      

      

      

      

  • 相关阅读:
    NullPointerException异常没有异常栈打印问题追踪
    Nginx服务器的安装和卸载
    线程池——ThreadPoolExecutor
    Nginx简介
    线程池框架简介
    同步工具——Phaser
    你不知道的搜索技巧?
    数据库并发处理
    索引-建立框架篇
    Leetcode 84 求直方图中矩形的最大面积
  • 原文地址:https://www.cnblogs.com/karila/p/7874316.html
Copyright © 2011-2022 走看看