Promise(resolve,reject)的基本使用
什么是Promise?
Promise是一个构造函数,其原型上有 then、catch方法,还有reslove,reject等静态方法。通过创建Promise实例,可以调用Promise.prototype上的then、catch方法。
Promise的作用
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(resolve,reject)的基本使用的更多相关文章
- ES6中的Promise.resolve()的作用
var foo = { then: (resolve, reject) => resolve('foo') }; var resolved = Promise.resolve(foo); 相当于 ...
- [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...
- es6中promise ALL Race Resolve Reject finish的实现
function mypromise(func){ this.statue = "pending"; this.data = null; this.resolveCallback ...
- Promise.resolve( data)与Promise.reject( data )
Promise.resolve( data)与Promise.reject( data ) 常用来生成已经决议失败或成功的promise实例: 1.Promise.reject(data)不管传递的是 ...
- AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)
AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...
- Promise.resolve解析
总结自:https://blog.csdn.net/lq15310444798/article/details/81275278 Promise.resolve返回一个Promise实例 参数分4种情 ...
- [转载]es6 Promise.resolve()方法
es6 Promise.resolve()方法 2018-01-27 22:29:06 ixygj197875 阅读数 16925更多 分类专栏: ES6标准入门 (阮一峰) ES6标准入门 Pr ...
- Promise.resolve()与Promise
//Promise.resolve()和Promise.reject()常用来生成已经被决议为失败或者成功的promise案例 //Promise.reject()简单一些,不管传给它什么值,它决议为 ...
- Promise.resolve的作用
Promise.resolve方法有下面三种形式: Promise.resolve(value); Promise.resolve(promise); Promise.resolve(thenable ...
随机推荐
- C++的智能指针学习笔记(初)
C++ primer plus 16.2节介绍了auto_ptr,该模板类在C++11中已弃用,目前已被shared_ptr代替. auto_ptr又叫做智能指针,用于管理动态内存分配的用法. 为什么 ...
- LeetCode:树专题
树专题 参考了力扣加加对与树专题的讲解,刷了些 leetcode 题,在此做一些记录,不然没几天就没印象了 力扣加加-树专题 总结 树的定义 // Definition for a binary tr ...
- zuul过滤器filter 的编写
通过上一节(zuul的各种配置)的学习,我们学会了zuul路由的各种配置,这一节我们来实现一下zuul的过滤器功能.那么为什么需要用到zuul的过滤器呢?我们知道zuul是我们实现外部系统统一访问的入 ...
- python +spatialite + window 解决方案(https://www.jianshu.com/p/5bc7d8b7b429)
运行环境在windows 10 64bit.先将python安装完成.然后,到 spatilite官网 找到MS(即Microsoft)版本,下载64位的mod_spatialite,将其先解压到目标 ...
- 计算机网络传输层之TCP协议(tcp协议特点、tcp报文段首部格式、tcp连接建立---三次握手、tcp连接释放---四次握手)
文章转自:https://blog.csdn.net/weixin_43914604/article/details/105516090 学习课程:<2019王道考研计算机网络> 学习目的 ...
- 计算机网络之网络层路由选择协议(自治系统AS、RIP、OSPF、BGP)
文章转自:https://blog.csdn.net/weixin_43914604/article/details/105313629 学习课程:<2019王道考研计算机网络> 学习目的 ...
- 设计AOV网拓扑排序的算法
拓扑排序 对一个有向图构造拓扑序列的过程称为拓扑排序(不唯一) 思想 从AOV网选择一个没有前驱的顶点并输出 从AOV网中删去该顶点,并且删去所有以该顶点为尾的弧 重复上述两步,直到全部顶点都被输出, ...
- vue mvc与mvvm
一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑:View 代表UI ...
- 几十行js实现很炫的canvas交互特效
几十行js实现很炫的canvas交互特效 废话不多说,先上效果图! 本篇文章的示例代码都是抄的一个叫Franks的老外在yutube上的一个教学视频,他还出了很多关于canvas的视频,十分值得学习, ...
- Kali安装Parallels Tools过程记录
最近两天又参加了公司一年一度的网络安全劳动竞赛,之前用过的一个 Kali 忘记密码进不去了 -_- .重新安装了 Kali 2021.3a 之后发现 Parallels Tools 安装失败,记录了一 ...