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在第二次握手才开始出现?初 ...
随机推荐
- BUGKU web刷题记录
web1 直接F12查看源码,得到flag. web2 直接输入验证码答案,长度被限制,修改可输入长度,提交后得到flag. web3 $what=$_GET['what']; echo $what; ...
- java File 类对操作系统文件目录进行操作:增删查
File类 1,概述 File类是java.io包下代表与平台无关的文件和目录,也就是说,如果希望在程序中操作文件和目录,都可以通过File类来完成. 2,构造方法 public File(Strin ...
- Tornado WEB服务器框架 Epoll
引言: 回想Django的部署方式 以Django为代表的python web应用部署时采用wsgi协议与服务器对接(被服务器托管),而这类服务器通常都是基于多线程的,也就是说每一个网络请求服务器都会 ...
- Various methods for capturing the screen
Explains techniques for capturing the screen programmatically. Download GDI source code - 72.1 Kb Do ...
- JAVA实现map集合转Xml格式
import java.util.Iterator; import java.util.SortedMap; import java.util.TreeMap; public class MainTe ...
- Grids
Grids Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Subm ...
- centos 各版本下载
地址: go to http://vault.centos.org/ for packages.
- MacOS使用Docker创建MySQL主主数据库
主从同步配置可以参考上一篇MacOS使用Docker创建MySQL主从数据库 一.创建MySQL数据库容器配置文件对应目录 我们在当前用户下创建一组目录,用来存放MySQL容器配置文件,(Linux下 ...
- Amazing!!CSS 也能实现烟雾效果?
最近利用 CSS 实现了一些看似超出 CSS 能力的效果: 巧用渐变实现高级感拉满的背景光动画 Amazing!!CSS 也能实现极光? 本文继续此系列,本文主要想探讨一下,使用 CSS 能否比较好的 ...
- Tomcat 组成与工作原理
开源的 Java Web 应用服务器,实现了 Java EE(Java Platform Enterprise Edition)的部分技术规范,比如 Java Servlet.Java Server ...