关于Promise的一点东东系列(二)

朋友们,你们做好准备迎接promise的到来没,没错,今天我要继续分享的是关于es6上面对promise的扩展和一些使用。

我们我们再回顾下es5上promise的基本用法:

const p = new Promise(function(resolve, reject) {/**....*/});

p       
.then(res => res)
.catch(err => err)
.finally(() => {});
我们第一版的介绍promise顺便还写了一个精简版的promise实现方式。不清楚的同学可以继续回看上一篇文章。不过细心的朋友会发现demo版promise不能连缀调用。。。之后继续优化吧,想要知道如何实现可以自己看看promise的源码实现。
es6 新增的promise方法等

大家可以看看阮大神的 es6入门教程/promise

我们还是一如既往的看看都有啥子东西?


看来这个Promise类上绑定了好多类方法:
今天只说在日常开发中我们常用的几个类方法。

* Promise.resolve
* Promise.reject
* Promise.all
* Promise.race

* Promise.resolve

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

详情参阅上文阮大神的文章

* Promise.reject

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了

详情参阅上文阮大神的文章

* Promise.all

主要来聊一聊这个方法

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失败')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了,打出 '失败'
})

Promse.all在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示,在此之前只显示loading图标。

代码模拟:

let request = time => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}后接口返回`)
    }, time)
  })
}

let p1 = request(3000);
let p2 = request(2000);

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后接口返回', '2秒后接口返回' ]
}).catch((error) => {
  console.log(error)
})
需要特别注意的是,Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的,即p1的结果在前,即便p1的结果获取的比p2要晚。这带来了一个绝大的好处:在前端开发请求数据的过程中,偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景,使用Promise.all毫无疑问可以解决这个问题。
现在有一个问题,如果我们不管多个promise成功还是失败的结果都要获取该怎么实现。下面看下面的案例,也许对你有帮助。
const p1 = new Promise((res, reject) => {
    setTimeout(() => {
        res('成功了');
    }, 2000)
});

const p2 = new Promise((res, reject) => {
    setTimeout(() => {
        reject('失败了');
    }, 2000)
});

const p3 = new Promise((res, reject) => {
    setTimeout(() => {
        reject('failed_3');
    }, 2000)
})

let promises = [p1, p2, p3];


//成功的结果预返回
let thenHandler = function (res) {
    return {
        res: res,
        status: 'success'
    }
}

//失败的结果预返回
let catchHandler = function (err) {
    return {
        err: err,
        status: 'failed'
    }
}

let transferedPromises = promises => { 
// 返回一个处理之后的promise数组
    return promises.map(promise => {
    return promise.then(thenHandler).catch(catchHandler);
});
}

promises = transferedPromises(promises);

        Promise.all(promises).then(res => console.log(res, 'res')).catch(e => console.log(e, 'catch'))

* Promise.race

顾名思义,Promse.race就是赛跑的意思,意思就是说,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})
promise在实际开发中使用频率几乎无处不在,所以学好promise是很有必要的。让我们一起再接再厉吧!
原文链接:segmentfault.com

上一篇:code-splitting
下一篇:ZooTeam 前端周刊|第 82 期

相关推荐

  • 🔥手写大厂前端知识点源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    2 个月前
  • 🔥前端面试大厂手写源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    2 个月前
  • 🔥《吊打面试官》系列 Node.js 必知必会必问!

    (/public/upload/f204a3b224d986128f1b4d9b8d06cd17) 前言 codeing 应当是一生的事业,而不仅仅是 30 岁的青春🍚 本文已收录 Git...

    3 个月前
  • 🔥 Promise|async|Generator 实现&原理大解析 | 9k字

    笔者刚接触async/await时,就被其暂停执行的特性吸引了,心想在没有原生API支持的情况下,await居然能挂起当前方法,实现暂停执行,我感到十分好奇。好奇心驱使我一层一层剥开有关JS异步编程的...

    2 个月前
  • 鸡啄米:C++编程入门系列之前言

    从今天开始将给大家讲解一些C编程入门的知识,对于也是个温习巩固的过程。将会用深入浅出的方式,尽量用最简单的语言让读者学会C语言,并爱上这门语言。         本前言讲述的是编程语言的发展过程、面...

    2 个月前
  • 面试题1:Promise递归实现拉取数据

    题目:请用promise递归实现拉取100条数据,每次拉取20条,结束条件为当次拉取不足20条或者已经拉取100条数据 ...

    1 个月前
  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... ...

    7 天前
  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... 数组...

    21 天前
  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... 数组...

    22 天前
  • 面试官在“逗”你系列:不借助第三变量交换两个变量值的方案你有几种?

    引言 在我们学习编程之初,就学习过变量的赋值操作,同时也学习了将一个变量的值赋值给另外一个变量。对于交换两个变量的值,很多童鞋都有解决方案。然鹅,对于面试官提出的不借助第三变量来交换两个变量的值,你能...

    2 个月前

官方社区

扫码加入 JavaScript 社区