Promise(resolve|Promise(resolve,reject)的基本使用
什么是Promise?
Promise是一个构造函数,其原型上有 then、catch方法,还有reslove,reject等静态方法。通过创建Promise实例,可以调用Promise.prototype上的then、catch方法。
Promise的作用
【Promise(resolve|Promise(resolve,reject)的基本使用】MDN对Promise的描述:
Promise能够将异步操作最终成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值,而是会返回一个 Promise,以便在未来某个时候把值交给使用者。
简单来说就是:使异步方法也能够根据其操作最终结果是成功还是失败的具体情况绑定不同的后续处理事件
Promise的使用
一个 Promise
必然处于以下几种状态之一:(其中fulfilled状态和rejected状态也称作settled状态)
1、pending : 初始状态,既没有被兑现,也没有被拒绝。
2、fulfilled : 意味着操作成功完成。
3、rejected : 意味着操作失败。
处于初始状态(pending)的Promise,最终要么成功(fulfilled )要么失败(rejected ),无论成功还是失败,通过then方法调用相关处理程序。
在实例化Promise的时候需要传入 resolve 和 reject 这两个函数作为其参数,当异步任务顺利完成且返回结果值时,会调用 resolve
函数;而当异步任务失败且返回失败原因(通常是一个错误对象)时,会调用reject
函数。
then函数中有两个参数,如下:
promise.then(successCallback, failureCallback);
第一个参数是状态变为成功后应该执行的回调函数,第二个参数是状态变为失败后应该执行的回调函数。
具体使用例子:
let testPromise = new Promise((resolve,reject)=>{ setTimeout(function(){ // resolve('成功!') //状态为成功,传的参数作为then函数中成功函数的实参 reject('失败!') //状态为失败,传的参数作为then函数中失败函数的实参 }, 1000); }); testPromise.then((data)=>{ console.log('success'+data) },(err)=>{ console.log('fail'+err) })
打印结果 "fail失败!"
其中 data 和 err 就是上面调用 resolve 和 reject 方法传入的值。
Promise链式调用 由上面例子可以知道 Promise链式调用可以实现多个异步操作连续执行,且上个操作执行成功后,执行下一个操作,并包含上个操作返回的结果。
因此链式调用可以很好解决 回调地狱 问题,避免了一层又一层的嵌套,虽然代码量可能没有减少,但是代码结构更加清晰、易读。
回调地狱例子:
toDoA(function(result) { toDoB(result, function(newResult) { toDoC(newResult, function(finalResult) { console.log('最终结果: ' + finalResult); }, failureCallback); }, failureCallback); }, failureCallback);
使用链式回调:
toDoA() .then(result => toDoB(result)) .then(newResult => toDoC(newResult)) .then(finalResult => { console.log(`'最终结果': ${finalResult}`); }) .catch(failureCallback);
catch(failureCallback)可以看做then(null,failureCallback)
更多使用方法可以参考MDN
推荐阅读
- 使用Promise对微信小程序wx.request请求方法进行封装
- 从如何使用到如何实现一个Promise
- Promise详解
- Promise|Promise 异步控制流
- Promise|Promise 高级用法对比
- promise面试题--从源码说
- Promise的实现与标准
- javascript|谈谈对于Promise简单的理解
- 前端|关于Promise的一些个人理解
- Git上传项目提示Push|Git上传项目提示Push rejected: Push to origin/master was rejected解决办法