ES6 Promise

最新推荐文章于 2024-10-29 20:22:44 发布

原创最新推荐文章于 2024-10-29 20:22:44 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#promise

ES6 专栏收录该内容

4 篇文章

订阅专栏

本文通过四个案例展示了JavaScript中Promise对象的使用方法，并结合Ajax请求实现异步操作的处理。详细介绍了如何利用Promise简化异步流程，提高代码可读性和可维护性。

1、案例

var p = new Promise(function(resolve,reject){
    //做一下操作
    setTimeout(function(){
        console.log('执行完毕');
        resolve('执行成的随便数据')
    },2000)
})
//在上面的代码中，我们执行了一个异步操作，也就是setTimeout，2秒后，输出“执行完成”，并且调用resolve方法


var p1 = new Promise(function(resolve,reject){
    resolve(1);
})

p1.then(function(value){
    //成功回调函数
    alert('success: '+value)
},function(error){
    //失败回调函数
    alert('fail')
})

2、案例

<script type="text/javascript">
function ajax(url,succ,fail){
    var xhr = new XMLHttpRequest();
    xhr.open('GET',url,true);
    xhr.onreadystatechange=function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            succ.call(this,xhr.responseText);
        }
    }
    xhr.send();
}
window.onload=function(){
    var oBtn = document.getElementById('btn1');
    var oBox = document.getElementById('box1');

    oBtn.onclick=function(){
         ajax('a.txt',function(str){
            alert('ok'+str);
         },function(){
            alert('no')
         })   
    }
}
</script>
<input type="button" value="获取" id="btn1" />
<div id="box1"></div>

3、案例

<script type="text/javascript">
function ajax(url,succ,fail){
    var xhr = new XMLHttpRequest();
    xhr.open('GET',url,true);
    xhr.onreadystatechange=function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            succ.call(this,xhr.responseText);
        }
    }
    xhr.send();
}
window.onload=function(){
    var oBtn = document.getElementById('btn1');
    var oBox = document.getElementById('box1');

    oBtn.onclick=function(){
         ajax('a.txt',function(str){
            alert('ok'+str);
         },function(){
            alert('no')
         })   
    }
}
</script>
<input type="button" value="获取" id="btn1" />
<div id="box1"></div>

4、案例

<script type="text/javascript">
function ajax(url,succ,fail){
    var xhr = new XMLHttpRequest();
    xhr.open('GET',url,true);
    xhr.onreadystatechange=function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            succ.call(this,xhr.responseText);
        }
    }
    xhr.send();
}
window.onload=function(){
    var oBtn = document.getElementById('btn1');
    var oBox = document.getElementById('box1');

    oBtn.onclick=function(){
        var p1 = new Promise(function(resolve,reject){
            ajax('a.txt',function(str){
                resolve(str);
            },function(err){
                reject(err);
            })
        })
        p1.then(function(str){
            oBox.innerHTML = str;
        },function(err){
            oBox.innerHTML = err;
        })
    }

}

</script>
<input type="button" value="获取" id="btn1" />
<div id="box1"></div>

catch 用来捕获报错

//catch 用来捕获报错
    var p1 = new Promise(function(resolve,reject){
        resolve('成功了')
    })
    p1.then(function(value){
        console.log(value);
        throw '报错了';
    },function(err){
        console.log(err)
    }).catch(function(e){
        console.log(e);  //报错了
    })