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)
    

      

      

      

      

  • 相关阅读:
    vue 父子传值 子组件修改父组件的值
    高德 定位到所在城市
    地图 JS API v2. vue 海量点标记
    vue-amap的使用
    react 和 vue 的比较
    接口自动化之pytest(3)——用例执行顺序插件pytest_ordering
    接口自动化之pytest(2)——用例设计原则及执行顺序
    接口自动化之pytest(1)——pytest相对unittest的优势
    python 装饰器(一)
    python 异常捕获、抛出异常
  • 原文地址:https://www.cnblogs.com/karila/p/7874316.html
Copyright © 2011-2022 走看看