【简单粗暴】最简单粗暴的promise解释与使用

2019-10-29  本文已影响0人  前端架构师陈龙威

最简单粗暴的使用方法,不讲原理

new Promise((resolve, reject) => {
    // 成功是resolve走then方法,失败是reject走catch方法
    
    // setTimeout相当于你异步事件的处理,比如ajax请求,遍历等。
    setTimeout( () => {
        if (true) {
            resolve('成功');
        } else {
            reject('失败');
        }
    }, 1000);
}).then(res => {
        // 接下来的回调,一般只需要then方法就够用了。
        console.log(`success:${res}`);
}).catch(err => {
        console.log(`error:${err}`);
})

另一种常用方式:把promise放到方法里

function getData() {
      let a = new Promise((resolve, reject) => {
            // ...
      });
      return a;
}
getData().then().catch(); // then捕捉resolve,catch捕捉reject
或
getData().then(doneEvent, failEvent); // then接受2个参数

另外jquery中的类似promise方法:
$.Deferred()类似Promise()$.when()类似Promise.all()

// 主要有resolve, reject, then
// 以及done, fail, always
function runAsync() {
    var defer = $.Deferred();
    setTimeout(function() {
        console.log('执行完成');
        defer.resolve('成功之后的数据返回');
    }, 1000);
    return defer.promise(); // 在此调用原因:https://www.cnblogs.com/yelongsan/p/7644239.html
}

// $.Deferred()的then接受3个参数,doneEvent, failEvent, progressEvent,第三个不清楚用来干嘛
runAsync().then(function(success){
    console.log(success);
}, function(fail) {
    console.log(fail);
})

// $.Deferred()的done(成功执行),fail(失败执行),always(不管成功失败都执行)使用:
runAsync().done(res=>console.log(res)).fail(err=>console.log(err)).always(msg=>console.log(msg))

// $.when()的使用,接受的非数组,而是多个Deferred对象
$.when(runAsync(), runAsync(), runAsync()).then(function(data1, data2, data3) {
    console.log(data1, data2, data3);
})

// 具体使用,方式1:
function runAsync() {
    var defer = $.Deferred();
    setTimeout(function() {
        console.log('执行完成');
        defer.resolve('成功之后的数据返回');
    }, 1000);
    return defer.promise(); // 在此调用原因:https://www.cnblogs.com/yelongsan/p/7644239.html
}
runAsync().then()

// 方式2:
$.Deferred(function(defer) {
    setTimeout(function(){
        defer.resolve(false);
    }, 1000);
}).promise().then(function(res){
    console.log(res)
})
上一篇 下一篇

猜你喜欢

热点阅读