对Promise的一些小尝试

最新推荐文章于 2025-02-13 16:57:11 发布

原创最新推荐文章于 2025-02-13 16:57:11 发布 · 458 阅读

0 ·

CC 4.0 BY-SA版权

我和JavaScript那点事专栏收录该内容

21 篇文章

订阅专栏

本文通过实例演示如何利用Promise简化多个Ajax请求的处理流程。通过Promise.all实现并发请求的统一管理，并展示了错误处理及后续操作的链式调用。

有时候需要同时处理多个ajax返回的值，只好把几个ajax写在回调里面，变得臃肿不堪，自己试了下promise的写法。

/**

/**
 * Created by kasol
 */
function test(resolve,reject){
    var num=Math.random()*5;
    console.log("test任务要延时 "+num+"秒");
    setTimeout(function () {
        if(num<2.5){
            resolve(num);
        }else{
            reject("test任务出错了！");
        }
    },num*1000);
}
function bar(resolve,reject){
    var num=Math.random()*10;
    console.log("bar任务要延时 "+num+"秒");
    setTimeout(function () {
        resolve(num);
    },num*1000)
}

function foo(resolve,reject){
    var xhr;
    if(XMLHttpRequest)
    xhr=new XMLHttpRequest();
    else{
        xhr=new ActiveXObject('Microsoft.XMLHTTP');
    }
    xhr.onreadystatechange= function () {
        if(xhr.readyState===4){
             if(xhr.status===200){
                 var jsondata=JSON.parse(xhr.responseText);
                    resolve( jsondata);//jsondata格式{"name":"Kasol","age":23,"skill":["html","css","js","as","php","mysql"]}
             }else{
                 console.log("error code is"+xhr.status);
                 reject("foo任务没有得到正确相应");
             }
        }else{

        }
    };
    xhr.open("get","http://localhost:8081/GZLT/index.php");
    xhr.send();

}
function add(input){
    var sum=input+input;
    return new Promise(function(resolve,reject){
        console.log(input+"+"+input+"="+sum);
          resolve(sum);
    });
}

function  mul(input){
    var m=input*input;
    return new Promise(function(resolve,reject){
        console.log(input+"*"+input+"="+m);
        resolve(m);
    });

}
var p1=new Promise(test);
var p2=new Promise(bar);
var p3=new Promise(foo);
//Promise.all([p1,p2]).then(function (result) {// 这里的all改成race，则变成抢占式
//    console.log(result);
//    //这个result是一个数组，包含了来自两个promise的反馈信息
//}).catch(function (reason) {
//   console.log(reason);
//});

/*p1.then(function (result) {
 console.log(result);
 }).catch(function (reason) {
 console.log(reason);
 });*/
Promise.all([p1,p2,p3]).then(function (result) {//三个任务
    var pSum=result[0]+result[1]+result[2].age;
    console.log(pSum);
    return new Promise(function(resolve,reject){
        resolve(pSum);
    });
}).then(add)
.then(mul)
.catch(function(reason){
        console.log(reason);
    });