promise初体验,小白也能看懂
promise出现的目的一为处理JavaScript里的异步,再就是避免回调地狱。 promise有三种状态:pending/reslove/reject 。
pending就是未决,resolve可以理解为成功,reject可以理解为拒绝。 promise的最终状态会凝固,成功了以后即便再执行reject ('failed')状态也不会改变。
Promise是一个构造函数,自己身上有all、reject、resolve这几个的方法,原型上有then、catch等同样的方法。这么说用Promise new出来的对象肯定就有then、catch方法。
我们创建一个实例就可以使用这些方法了。
let Mypromise = new Promise(function(resolve,reject){
setTimeout(function(){
let a = 22;
let b = 20;
if(a>b){
// 如果走了resolve,则触发.then,把a+b的值传入.then
resolve(a+b);
}else{
// 如果走了reject,则触发.catch,输出err 'b>a'
reject('b>a');
}
},2000);
});
// 当b>a的时候,Mypromise.then这串代码不会被触发
Mypromise.then(function(value){
console.log('2s后');
console.log(value,'value');
// 如果 then 中返回的是一个 Promise 对象,那么下一个 then 将相当于对这个返回的 Promise 进行操作
// 记得如果还想继续给下一个.then传参数,就必须要return
return new Promise(function(resolve,reject){
setTimeout(function(){
let c = 41;
if(c<value){
// 如果走了resolve,则触发.then,把value-c的值传入.then
resolve(value-c);
}else{
// 如果走了reject,则触发.catch,输出err 'c>value'
reject('c>value');
}
},1000)
})
}).then(function(data){
console.log('1s后');
console.log(data,'data');
})
.catch(function(err){
console.log(err)
})
可以看到这串代码是当a>b的时候走的resolve,否则走reject,首先我们要知道,当触发resolve的时候就会去执行.then(),触发reject的时候就会执行.catch(),
a=22,b=20,所以a>b,走resolve,resolve传递了a+b的值给了.then,
也就是把42传递给了.then,这个时候执行了.then(),首先输出了value,也就是resolve传递下来的值,(注意这里的value可以随便取名),
然后.then()中有一个新的promise,如果 then 中返回的是一个 Promise 对象,那么下一个 then 将相当于对这个返回的 Promise 进行操作,
还有就是如果还想继续给下一个.then传参数,就必须要return,如果不return的话那么结果将会变为42和undifinded,
promise 不能返回值只能返回promise,因为它是异步的,要用就得 fn1().then(value => console.log(value)) 的方式拿到值,
所以到第二个promise的时候走了resolve,执行.then,第二个.then通过第一个.then,return把value-c的值传到了.then中输出了date,

如果我们把b改为25会怎样呢?
let Mypromise = new Promise(function(resolve,reject){
setTimeout(function(){
let a = 22;
let b = 25;//变成了25
if(a>b){
// 如果走了resolve,则触发.then,把a+b的值传入.then
resolve(a+b);
}else{
// 如果走了reject,则触发.catch,输出err 'b>a'
reject('b>a');
}
},2000);
});
// 当b>a的时候,Mypromise.then这串代码不会被触发
Mypromise.then(function(value){
console.log('2s后');
console.log(value,'value');
// 如果 then 中返回的是一个 Promise 对象,那么下一个 then 将相当于对这个返回的 Promise 进行操作
// 记得如果还想继续给下一个.then传参数,就必须要return
return new Promise(function(resolve,reject){
setTimeout(function(){
let c = 41;
if(c<value){
// 如果走了resolve,则触发.then,把value-c的值传入.then
resolve(value-c);
}else{
// 如果走了reject,则触发.catch,输出err 'c>value'
reject('c>value');
}
},1000)
})
}).then(function(data){
console.log('1s后');
console.log(data,'data');
})
.catch(function(err){
console.log(err)
})
把b改为25,b比a大所以走了reject,这时候就只输出了一个'b>a',

因为他没走resolve,所以自然不会触发.then,所以下面的代码块也不会执行。
纯属小白学习笔记,如果有不正确的,还望各位大佬指正!!!
promise初体验,小白也能看懂的更多相关文章
- 小白也能看懂的插件化DroidPlugin原理(二)-- 反射机制和Hook入门
前言:在上一篇博文<小白也能看懂的插件化DroidPlugin原理(一)-- 动态代理>中详细介绍了 DroidPlugin 原理中涉及到的动态代理模式,看完上篇博文后你就会发现原来动态代 ...
- 小白也能看懂的插件化DroidPlugin原理(三)-- 如何拦截startActivity方法
前言:在前两篇文章中分别介绍了动态代理.反射机制和Hook机制,如果对这些还不太了解的童鞋建议先去参考一下前两篇文章.经过了前面两篇文章的铺垫,终于可以玩点真刀实弹的了,本篇将会通过 Hook 掉 s ...
- 小白也能看懂的Redis教学基础篇——朋友面试被Skiplist跳跃表拦住了
各位看官大大们,双节快乐 !!! 这是本系列博客的第二篇,主要讲的是Redis基础数据结构中ZSet(有序集合)底层实现之一的Skiplist跳跃表. 不知道那些是Redis基础数据结构的看官们,可以 ...
- 【vscode高级玩家】Visual Studio Code❤️安装教程(最新版🎉教程小白也能看懂!)
目录 如果您在浏览过程中发现文章内容有误,请点此链接查看该文章的完整纯净版 下载 Linux Mac OS 安装 运行安装程序 同意使用协议 选择附加任务 准备安装 开始安装 安装完成 如果您在浏览过 ...
- 小白也能看懂的Redis教学基础篇——做一个时间窗限流就是这么简单
不知道ZSet(有序集合)的看官们,可以翻阅我的上一篇文章: 小白也能看懂的REDIS教学基础篇--朋友面试被SKIPLIST跳跃表拦住了 书接上回,话说我朋友小A童鞋,终于面世通过加入了一家公司.这 ...
- 搭建分布式事务组件 seata 的Server 端和Client 端详解(小白都能看懂)
一,server 端的存储模式为:Server 端 存 储 模 式 (store-mode) 支 持 三 种 : file: ( 默 认 ) 单 机 模 式 , 全 局 事 务 会 话 信 息 内 存 ...
- 小白也能看懂插件化DroidPlugin原理(一)-- 动态代理
前言:插件化在Android开发中的优点不言而喻,也有很多文章介绍插件化的优势,所以在此不再赘述.前一阵子在项目中用到 DroidPlugin 插件框架 ,近期准备投入生产环境时出现了一些小问题,所以 ...
- 小白也能看懂的插件化DroidPlugin原理(一)-- 动态代理
前言:插件化在Android开发中的优点不言而喻,也有很多文章介绍插件化的优势,所以在此不再赘述.前一阵子在项目中用到 DroidPlugin 插件框架 ,近期准备投入生产环境时出现了一些小问题,所以 ...
- 小白都能看懂的tcp三次握手
众所周知,TCP在建立连接时需要经过三次握手.许多初学者经常对这个过程感到混乱:SYN是干什么的,怎么一会儿是1一会儿是0?怎么既有大写的ACK又有小写的ack?为什么ACK在第二次握手才开始出现?初 ...
随机推荐
- HGAME pwn ROP_LEVEL2
花了好多天,终于把这个题彻底弄懂了...自己太菜了 下载文件,首先checksec检查一下保护. 只开启了堆栈不可执行,接下来拖到IDA看一下C的伪代码. 大致先让你输入,然后再次让你输入. 第 ...
- android jni-dlerror报undefined symbol: JNI_OnLoad
以下是很简单的一个官方的jni方法,在MainActivity的onCreate中调用 extern "C" JNIEXPORT jstring JNICALL Java_com_ ...
- CF1440A Buy the String 题解
Content 有 \(t\) 组询问,每组询问给出一个长度为 \(n\) 的 \(0/1\) 串,你可以花 \(h\) 的代价把 \(0\) 修改成 \(1\) 或者把 \(1\) 修改成 \(0\ ...
- win10中docker使用docker-compose启动报错:pywintypes.error: (2, 'CreateFile', '系统找不到指定的文件。')
Traceback (most recent call last): File "docker\api\client.py", line 214, in _retrieve_ser ...
- 使用unc0ver(5.3.1)执行jailbreak踩坑
官方网站: https://unc0ver.dev/ 目前版本: 5.3.1 使用mac os+altstore步骤: AltStore Download AltStore. Use the link ...
- 【LeetCode】911. Online Election 解题报告(Python)
[LeetCode]911. Online Election 解题报告(Python) 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ ...
- 【剑指Offer】把数组排成最小的数 解题报告(Python)
[剑指Offer]把数组排成最小的数 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-interviews ...
- 1336 - Sigma Function
1336 - Sigma Function PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB S ...
- [炼丹术]使用Pytorch搭建模型的步骤及教程
使用Pytorch搭建模型的步骤及教程 我们知道,模型有一个特定的生命周期,了解这个为数据集建模和理解 PyTorch API 提供了指导方向.我们可以根据生命周期的每一个步骤进行设计和优化,同时更加 ...
- [opencv]膨胀腐蚀
Mat dilateimg; Mat element = getStructuringElement(MORPH_RECT, Size(3, 3)); dilate(canny, dilateimg, ...