专栏首页coding个人笔记Promise的几个方法

Promise的几个方法

我们知道了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个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Promise其它方法一

    这个是最简单的,catch其实就是没有成功方法resolve的then函数,所以catch方法:

    wade
  • ES6之Promise对象

    Promise对象其实就是解决异步用的,比回调函数和事件更合理更强大,由ES6写进语言标准,统一了用法,然后提供了原生Promise对象。

    wade
  • 初识promise

    new Promise( function(resolve, reject) { } );

    wade
  • 自己实现一个JavaScript Promise类

    Promise对象用于表示一个异步操作的最终状态以及操作的值。Promise本质上是一个绑定了回调的对象,区别于将回调传入函数内部。

    伯爵
  • JavaScript之Promise对象

    Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,...

    laixiangran
  • JS魔法堂:剖析源码理解Promises/A规范

    一、前言                                 Promises/A是由CommonJS组织制定的异步模式编程规范,有不少库已根据该规...

    ^_^肥仔John
  • 《你不知道的JavaScript》:ES6 Promise API 详解

    new Promise(…) 构造器的参数必须提供一个函数回调。这个回调是同步的或者立即调用的。这个函数又接受两个函数回调参数,用以支持promise的决议。通...

    前端_AWhile
  • 手写一个Promise/A+,完美通过官方872个测试用例

    前段时间我用两篇文章深入讲解了异步的概念和Event Loop的底层原理,然后还讲了一种自己实现异步的发布订阅模式:

    蒋鹏飞
  • Promise 与 RxJS

    首先是需要源源不断的流出数据的场景,因为Promise是一次性的,不适合做这类工作。 比如说把事件/定时器抽象成Rx的Observable更合适,事件可以响应很...

    剑行者
  • 手写源码系列(二)——Promise相关方法

    本文首发于知乎专栏——前端面试题汇总,大家可以通过文章底部的阅读原来来访问原文地址

    用户1687375

扫码关注云+社区

领取腾讯云代金券