当前位置 > it书童 > 大前端 > 正文

promise 基本使用

大前端 it书童 2020-02-12 18:09:09 0赞 0踩 41阅读 0评论

promise 是为了解决回调困境而产生的

基本使用

// console.log(typeof Promise)
// console.dir(Promise);
var p = new Promise(function(resolve, reject){
    // 这里用于实现异步任务
    setTimeout(function(){
    var flag = false;
    if(flag) {
        // 正常情况
        resolve('hello');
    }else{
        // 异常情况
        reject('出错了');
    }
    }, 100);
});
p.then(function(data){
    console.log(data)
},function(info){
    console.log(info)
});

发送 ajax

将发送 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;
}

发送一个 ajax 请求

queryData('http://localhost:3000/data')
    .then(function(data){
        console.log(data);
    },function(info){
        console.log(info)
    });

发送多个ajax请求并且保证顺序

queryData('http://localhost:3000/data')
    .then(function(data){
        console.log(data)
        return queryData('http://localhost:3000/data1');
    })
    .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
    })
    .then(function(data){
        console.log(data)
    });

then 参数中的函数返回值可以是一个 promise 对象,也可以是一个字符串,如果是字符串,下一个 then 中的 data 即为上一个 then 的返回值

queryData('http://localhost:3000/data')
    .then(function(data){
    return queryData('http://localhost:3000/data1');
    })
    .then(function(data){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
        resolve(123);
        },1000)
    });
    })
    .then(function(data){
    return 'hello';
    })
    .then(function(data){
    console.log(data)
    })

promise 常用 api

实例方法

function foo() {
    return new Promise(function(resolve, reject){
    setTimeout(function(){
        // resolve(123);
        reject('error');
    }, 100);
    })
}

foo1()
    .then(function(data){
    console.log(data)
    })
    .catch(function(data){
    console.log(data)
    })
    .finally(function(){
    console.log('finished')
    });

// 等价于以下写法

foo2()
    .then(function(data){
    console.log(data)
    },function(data){
    console.log(data)
    })
    .finally(function(){
    console.log('finished')
    });

对象方法

var p1 = queryData('http://localhost:3000/a1');
var p2 = queryData('http://localhost:3000/a2');
var p3 = queryData('http://localhost:3000/a3');

// 等全部请求完成再返回结果
Promise.all([p1,p2,p3]).then(function(result){
  console.log(result)
})

// 只要有一条请求返回结果就继续执行下面代码
Promise.race([p1,p2,p3]).then(function(result){
    console.log(result)
})
转载须注明出处:https://www.itshutong.com/articles/436/promise-basic-usage
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录