Promise、Promise.all 和Promise.race用法

前段时间的项目中由于大多数是异步请求，所以返回的数据顺序不确定造成了很多数据错误。查了大量的资料总算完成，做个小结。

promise基础：resolve,和reject

resolve方法：在异步方法执行成功后调用

reject方法：在异步方法执行失败后调用

promise

创建一个promise对象，在对象中传入需要执行的异步方法，在异步方法结束后，调用resolve或者reject

// 写法1
const promise = new Promise(function(resolve, reject) {
        //执行异步操作...

        //异步操作执行完成后，根据业务逻辑判读是成功还是失败
        if (true) {
            // 成功拿到异步接口所需的数据后，可以通过resolve方法，把参数传递下去
            resolve('success');
        } else {
            // 如果执行异步接口返回为失败，则执行另外的方法
            reject('faild');
        }
    })
    // 如果调用resolve
promise.then(function(result) {
    console.log(result); // 输出为success  即resolve传递下来的参数
});
// 如果调用reject
promise.catch(function(result) {
    console.log(result); // 输出为faild
})


// 写法2：
const promise2 = new Promise(function(resolve, reject) {
    //执行异步操作...

    //异步操作执行完成后，根据业务逻辑判读是成功还是失败
    if (true) {
        // 成功拿到异步接口所需的数据后，可以通过resolve方法，把参数传递下去
        resolve('success');
    } else {
        // 如果执行异步接口返回为失败，则执行另外的方法
        reject('faild');
    }
}).then(function(result) {
    console.log(result); // 输出为success  即resolve传递下来的参数
}).catch(function(result) {
    console.log(result); // 输出为faild
})

promise.all

已有上面的promise基础后，可以继续看promise.all的内容。promise.all主要用于一次性执行多个异步方法，并且按传入顺序执行，用法如下：

// 写法1
function fun1(num = -1) {

    // 在fun1中返回一个promise对象
    return new Promise(function(resolve, reject) {
        // 为了体现是异步接口，这里使用一个定时器，延迟3秒
        setTimeout(resolve, 3000, 'fun1');
    })
};

function fun2(num2 = 200) {
    // 在fun2中也返回一个promise对象
    return new Promise(function(resolve, reject) {
        // 为了和fun1区分开来，fun2延迟1秒
        setTimeout(resolve, 1000, 'fun2');
    })
}

// 由于fun1和fun2是方法，所以使用fun1()执行该方法
Promise.all([fun1(), fun2()]).then(function(result) {
    console.log(result) // 输入应该为 ['fun1','fun2']
})

与promise.all相同的，还有另外一种写法，通过返回的promise对象中调用then方法。then方法中在返回一个新的promise对象，也能达到类似promise.all的效果，实例如下：

function multiply(value) {
    console.log('调用乘法，当前值为：', value)
    return new Promise(function(resolve, reject) {
        resolve(value * value)
    });
}

function add(value) {
    console.log('调用加法，当前值为：', value)
    return new Promise(function(resolve, reject) {
        resolve(value + value)
    });
}

var p = new Promise(function(resolve, reject) {
    resolve(123);
});

p.then(multiply)
    .then(add)
    .then(multiply)
    .then(add)
    .then(function(result) {
        console.log(result);  //1831093128
    });

这段代码中，传入了一个123.先是调用了乘法，然后调用加法，然后调用乘法....直到最终计算出最后的值。与promise.all的顺序执行异步方法类似。

Promise.race

这个方法比较特别，在执行多个异步操作中，只保留取第一个执行完成的异步操作的结果，其他的方法仍在执行，不过执行结果会被抛弃。

var fun1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 3000, 'fun1');
});

var fun2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 200, 'fun2');
});

// *注：这里使用的示例和promise.all用的示例类似，
// 可是没有用()执行，因为fun1就是一个promise对象，不需要执行
Promise.race([fun1, fun2]).then(function(result) {
    console.log(result); // 'fun2'   因为fun2比较早执行结束
});

以上就是proomise、promise.all和Promise.race的基本用法。结合着不同的用法，可以更好的把握异步执行的顺序。

Promise、Promise.all 和Promise.race用法

猜你喜欢