异步会带来什么问题?
如果两个动画需要按顺序执行,即第一个执行结束,再开始第二个,传统是使用回调,那就会造成回调深渊
Promise示例:
const p1 = new Promise((resolve, reject) => {
ajax({
url: xxx,
success(data){
resolve(data)
},
error(err){
reject(err)
}
})
})
p1.then((value) => {
console.log(value)
}, reason => console.log(reason))
通过以上例子,需要知道的基本概念
1. Promise 是一个构造函数(也就是一个类),使用 new Promise 来创建实例。所以 promise 是创建出来的一个实例对象。
2. Promise 构造函数有一个参数 executor(即constructor(executor)),它是一个函数,在Promise 创建实例的过程就会被执行。
3. excutor 函数有两个参数 resolve,reject,也都是函数。在excutor 执行的过程中,会触发 resolve,reject执行。
4. Promise 中有两个属性,value和 reason。
5. resolve 执行时可以传入异步事件成功回调执行的结果,这个结果改变 Promise的value。resolve执行时会执行then 传入的 onFulfilled,参数为 Promise的 value。
6. 类似,reject 执行时可以传入异步事件失败回调执行的结果,,这个结果改变 Promise 的reason。reject 执行时会传入 then执行的 onRejected,参数为 Promise 的 reason。
7. Promise实例有 then 方法,then方法有两个参数, Promise 被解决的回调 onFulfilled、Promise 被拒绝的回调 onRejected,都是函数。
8. onFullfilled 被传入Promise的onFullfilledCallbacks队列,供 resolve 执行时调用。
9. onRejected 被传入 Promise 的 onRejectedCallbacks 队列,供 reject 执行时调用。
10. onFullfilled 有一个参数 value,在实际调用时由resolve 函数传递。
11. onRejected 有一个参数 reason,在实际调用时由 reject 函数传递。
12. Promise 有 3种状态(state): PENDING(等待中),FULFILLED(已完成)、REJECTED(已拒绝),用来控制Promise 状态,状态是不可逆的,只能由PENDING 到 FULFILLED或者 PENDING 到 REJECTED。
通俗理解Promise 是什么?处理回调又是怎么样的一个过程?
Promise帮助我们更加优雅的处理回调。
Promise 就是一个承诺,承诺里面的操作,如一个ajax请求,使用者自己的代码,承诺会处理请求回来的东西,这就是一个承诺,使用者可以决定什么时候用解决 (resolve)来处理承诺,什么时候用拒绝(reject)来处理曾经的承诺。当你要解决时,比如(ajax 成功时),可以带上要处理的值,比如 ajax 成功后返回的数据,当你要拒绝时,可以带上要拒绝的原因,比如 ajax 失败后返回的信息。以上的解决(resolve)和拒绝(reject)只是承诺(Promise)会进行的操作,具体操作是如何处理,是在then之后,用户自己编写的,就是用户想要对成功的数据进行怎样的处理,失败的数据又进行怎么样的处理,完全由用户自己编写,即如何处理解决时的操作(onFulfilled)和处理拒绝(onRejected)时的操作。
也就是说:在写完要做的事情以后,promise的resolve函数会传入做事情成功后的参数,并在函数体内将这个参数传入用户自己编写的处理成功的回调函数并调用,reject函数亦然。
所以在构建一个承诺的时候,我们承诺一定会解决或拒绝,但不是在未来去写具体的解决方法(回调函数),而是之后(then)就可以立即去写解决的具体过程,Promise给你这样的权利。这就是Promise 做的事情,通过一种构造(或者说包裹),让你能够在构造之后立即处理一些事情,即便这些事情是未来不知道什么时候会发生的,等事情发生并产生结果的时候,Promise的resolve和reject 会在对应的结果当中帮助你来调用这些处理函数进行处理。就是说,你可以放心地在这件事情发生的同时,书写未来要操作的过程,只需要在这件事情完成后要进行的操作的地方预留位置,即resolve和reject,你所写的过程就会在那个位置执行。
思考:Promise 是如何知晓请求何时成功的?
resolve 写在了 ajax 成功的回调函数里,然后 ajax 成功以后,就会执行 resolve,在 resolve 中修改了 Promise 的属性 status 的值,从 PENDING 修改为 FULFILLED,从而就知晓了请求的结果,同理,reject 亦然。如果 Promise 中是同步函数,那可以按使用者的心意直接调用 resolve 或者reject,但是切记,一旦状态改变,就不会再修改,就是说不能既调用 resolve 又调用 reject,因为 Promise 只会有一种状态,调用了也没用,异步操作里两个函数都调用,也是在不同的时机进行的。
总结:
·Promise 只是解决了异步回调地狱的问题。
·Promise 经常用来包裹异步操作,之后使用 then 进行调用。
·then 中的回调函数在 Promise resolve 或 reject 之后被异步执行。