js中promise到底怎么用

JavaScript09

js中promise到底怎么用,第1张

我举个生活中的例子吧,比如说你去麦当劳买吃的,你下订单后,会给你一个小纸条,这个小纸条相当于你和麦当劳之间的约定,这个小纸条也可以理解为你所定的餐的一个占位符。等麦当劳饭做好了的时候,会吧饭送到你面前,并且把小纸条收走。

这个如果在代码中的话,就意味着,你在执行代码的时候,可能会在未来某个时刻才会取到值(异步),等在值取到以后,会进行一些相应的处理,比如说ajax,这实际上就是promise的一个典型的应用场景。

我刚刚只是说了promise的一个大的应用场景,我觉得只要能把握住这个,具体的API就可以了。

假如你想对它的使用有一个更深入的了解的话,我还可以推荐你一个小文章: Javascript基础之-Promise

加油

作为一名程序猿,经常遇到回调函数的情况,原生js的回调函数是一层一层的嵌套调用,而es6提供了一种新的写法,Promise,它可以把原本的嵌套回调函数实现成横向的调用,即链式调用。

下面看一个Promise的简单用法:

接着开始模拟:

首先,_Promise构造函数会接收一个函数resolver并执行,函数中又包含resolve和reject两个参数,然后,_Promise构造函数生成的实例有三种状态,分别是pending(初始值)、fullfilled(成功)和rejected(失败),且由pending变为成功或者失败后状态不可逆。

resolve和reject函数执行的时候会先判断状态,如果是pending则执行,且将状态变为fullfilled或者rejected,并将resolve/reject函数中参数传递给_result,以便then函数调用时使用。

因为有可能存在链式调用,所以执行then函数的返回值需要判断,如果isResolve或者isReject函数返回的是一个新的_Promise实例,则返回这个实例,否则返回当前实例

至此,Promise已经模拟完成~

相信用过JS的都知道JS是单线程的,同步的函数先执行,异步的函数先加入到一个队列中等同步执行完了再执行异步函数。基于这个JS采用异步回调的方式来处理需要等待的事件,是的代码会继续执行而不用在异步处理的地方一直等待着。同时也带来一个不好的方面,如果我们有很多的回调函数, 也就是说一个回调函数里边再嵌套一个回调一层一层的嵌套,这样就很容易进入传说中的回调地狱。

注意:异步和回调不是一个东西

下面感受一下回调地狱代码的魅力:

是挺有美感的但是阅读性很差,写法也让人感到无力,es6新出的promise对象已经es7的async await都可以解决这个问题,但是今天的主角是Promise。

Promise是异步编程的一种解决方案,可以替代传统的解决方案--回调函数和事件。ES6统一了用法,并原生提供了Promise对象。作为对象,Promise有一下两个特点:(1)对象的状态不受外界影响;(2)一旦状态改变了就不会在变,也就是说任何时候Promise都只有一种状态。Promise有三种状态,分别是:Pending(进行中),Resolved(完成),Rejected (失败)。Promise从Pending状态开始,如果成功就转到成功态,并执行resolve回调函数;如果失败就转到失败状态并执行reject回调函数。

Promise一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

Promise构造函数接收一个函数作为参数,该函数的两个参数是resolve,reject,它们由JavaScript引擎提供。其中resolve函数的作用是当Promise对象转移到成功,调用resolve并将操作结果作为其参数传递出去;reject函数的作用是单Promise对象的状态变为失败时,将操作报出的错误作为其参数传递出去

介绍一下Promise的api怎么使用:

1、Promise.resolve()的作用将现有对象转为Promise对象resolvedPromise.resolve('test')==new Promise(resolve=>resolve('test'))

2、Promise.reject()返回一个Promise对象,状态为rejected

3、Promise.prototype.then()方法接受两个参数,第一个是成功的resolved的回调,另一个是失败rejected的回调,第二个失败的回调参数可选。并且then方法里也可以返回promise对象,这样就可以链式调用了。

4、Promise.prototype.catch()发生错误的回调函数。

5、Promise.all() // 所有的事都有完成,相当于 且,适合用于所有的结果都完成了才去执行then()成功的操作。

6、Promise.race() // 完成一个任务即可,相当于 或。(这个经常用在一些图片比较多的网站)