Promise用法

126 阅读2分钟

1.Promise概念

是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息。

2.使用Promise主要有以下好处:

1.可以避免多层异步调用嵌套问题(回调地狱)
2.Promise对象提供了简洁的API, 使得控制异步操作更加容易

developer.mozilla.org/zh-CN/docs/…

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    <script type="text/javascript">
    /*Promise基本使用*/
        console.log(typeof Promise)
        console.dir(Promise);
    </script>
    </body>
</html>

3.Promise基本用法:

实例化Promise对象,构造函数中传递函数,该函数中用于处理异步任务 resolve和reject两个参数用于处理成功和失败两种情况,并通过p.then获取处理结果

<script>
     var p=new Promise(function(resolve,refect){
     //这里实现异步任务
        //成功时调用resolve ()
        //失败时调用reject ()
        setTimeout(function(resolve,reject){
                var flag=true
                if(flag){
                    resolve('hello')
                }else{
                    reject('出错啦')
                }
         },1000);
        })
    p.then(function(data){
        console.log(data);//从resolve得到正常结果
    }),function(info){
         console.log(info);//从reject得到错误结果
    }
</script>

3.1基于Promise处理Ajax请求

    function queryData(url) {
        var p = new Promise(function (resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState != 4) return;
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //处理正常的情况
                    resolve(xhr.responseText);
                } else {
                    //处理异常情况
                    reject('服务器错误');
                }
            };
            xhr.open('get', url);
            xhr.send(null);
        });
        return P;
    }
    queryData('http://localhost:3000/data')
    then(function (data) {
        console.log(data);
    }), function (info) {
        console.log(info);
    };

then参数中的函数返回值
1.返回Promise实例对象
    返回的该实例对象会均用下一 个then
2.返回普通值
    返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收该值

4.Promise常见API

实例方法

    p.then() 得到异步任务的正确结果
    p.catch()获取异常信息
    p.finally()成功与否都会执行(尚且不是正式标准)
    queryData()
            .then(function (data) {
                console.log(data);
            })
            .catch(function (data) {
                console.log(data);
            })
            .finally(function () {
                console.logh('finished') ;
             });