美文网首页
Promise的几个方法

Promise的几个方法

作者: wade3po | 来源:发表于2019-02-09 19:42 被阅读5次

我们知道了Promise链接调用,只要返回一个Promise对象就能一直链接调用,但是如果是这样写:

new Promise(function(resolve, reject){
    resolve('star');
}).then(function(data){
    console.log('two: ', data);
    return new Promise(function(resolve, reject){
        resolve('two result');
    });
}).then(function(data){
    console.log('three: ', data);
    return new Promise(function(resolve, reject){
        resolve('three result');
    });
}).then(function(data){
    console.log('end result: ', data);
}).catch(function(err){
    console.log('err: ', err);
});

我们都会觉得虽然是链式调用,对比回调会清晰一点,但是并没有想象中的那么美好。所以Promise提供了几个方法。

Promise.resolve:

返回一个由参数决定的Promise对象,简单来说就是返回一个Promise对象,且是成功的时候调用该方法,会将信息传递给下一个then方法。

Promise.reject:

返回一个状态为失败的Promise对象,并将失败信息传递给对应的catch方法。

有了这两个方法,那么我们就能想上面的链式调用简写:

new Promise(function(resolve, reject){
    //do something
    resolve('star');
}).then(function(data){
    //do something
    console.log('two: ', data);
    return Promise.resolve('two result');
}).then(function(data){
    //do something
    console.log('three: ', data);
    return Promise.resolve('three result');
}).then(function(data){
    //do something
    console.log('end result: ', data);
}).catch(function(err){
    console.log('err: ', err);
});

成功就调用resolve,失败就调用reject,在这之前你可以进行一系列逻辑处理,只要把最好的结果通过return Promise就可以,这样就很简洁很清晰。

Promise.all:

上面都是写在一起的链式调用,Promise还有一个all方法,可以把封装好的Promise方法进行链式调用。

var promise1 = new Promise(function(resolve, reject) {
    resolve(1);
});
var promise2 = new Promise(function(resolve, reject) {
    resolve(2);
});
var promise3 = new Promise(function(resolve, reject) {
    resolve(3);
});
Promise.all([promise1, promise2, promise3]).then(function(values) {
    console.log(values);//[1, 2, 3]
}).catch(function(values) {
    console.log(values);
});

Promise.all方法必须是所有的对象都是调用成功的resolve方法,否则会走catch方法。然后得到的结果会按顺序输出一个数组。如果参数不是Promise对象,这些值会被忽略,但是结果放入数组。在对于页面一些必须所有数据得到才渲染的场景下,all方法非常有用。

Promise.race:

第一个执行完毕的结果,无论结果是成功还是失败。

var promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
});
var promise2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 550, 'two');
});
Promise.race([promise1, promise2]).then(function(value) {
    console.log(value);
});

不管是成功还是失败,只要是第一个执行完毕就会执行race方法。

上面的方法运行的时候记得修改resolve成reject,看看结果。

说真的,Promise在一些场景下非常有用,对于想要封装方法封装库也非常有用,或许开发业务过程中我们用的很少,但是对于Promise方法我还是觉得应该知道了解,在遇见一些能够使用的时候快速实现。

欢迎关注Coding个人笔记 公众号

相关文章

  • Promise的几个方法

    我们知道了Promise链接调用,只要返回一个Promise对象就能一直链接调用,但是如果是这样写: 我们都会觉得...

  • 一步步手写Promsie源码(二)

    Promise.all方法实现 Promise.resolve方法实现 Promise.finally方法实现 c...

  • Promise.finally、Promise.all、Prom

    Promise原型对象上的方法 Promise构造函数中定义的方法 1. Promise.prototype.fi...

  • Promise,async,await笔记

    Promise,async,await笔记 Promise 创建promise对象 Promise对象构造方法传入...

  • 详解ES6 Promise

    整理Promise提供的各种方法和错误处理方法。 1.Promise.resolve() 1.1 Promise....

  • Promise对象

    Promise对象 创造一个Promise实例 then方法 Promise实例生成以后,可以用then方法分别指...

  • 为原型添加方法

    手动添加数组方法 为promise添加实现方法 promise.finally promise.all promi...

  • 【promise-05】promise.all()与promis

    #promise.all()与promise.race() Promise.all()方法可以把多个promise...

  • promise浅析

    创建promise Promise.prototype.then方法的使用Promise实例生成后,可用then方...

  • js sleep

    // promise 在ES6的语法中,Promise是sleep方法异步的实现一种方式,借助Promise方法可...

网友评论

      本文标题:Promise的几个方法

      本文链接:https://www.haomeiwen.com/subject/fonssqtx.html