Promise的基本使用

利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题, 更简洁地控制函数执行流程;

  通过new实例化Promise,  构造函数需要两个参数, 第一个参数为函数执行成功以后执行的函数resolve, 第二个函数为函数执行失败以后执行的函数reject:

new Promise(function(resolve , reject) {
});

  通过Promise,我们把回调函数用线性的方式写出来,而不是一层套一层, 这个函数有四层回调;

fn("args", function(a) {fn1("foo", function(b) {fn2("bar", function(c) {fn3("baz", function(d) {alert("回调成功,获知的内容为:"+a+b+c+d)})})})
})

  以上的Demo只有包含成功的回调, 如果失败的回调也算的话, 也就更麻烦了;

  

  如果使用Promise的方式,我们可以改装成线性的代码, 更加符合阅读习惯,只要在then函数下写逻辑即可;

new Promise(function(resolve , reject) {resolve(1);
}).then(function(val) {console.log(val);return new Promise(function(resolve , reject) {resolve(2);});
}).then(function(val) {console.log(val);return new Promise(function(resolve , reject) {resolve(3);});
}).then(function(val) {console.log(val);return new Promise(function(resolve , reject) {resolve(4);});
}).then(function(val) {console.log(val);
});

Promise实例的三种状态:

  每一个实例化的Promise都有三个状态;pending(等待)  rejected(拒绝)  resolved(解决) ,默认的状态为pending,如果执行了resolve(), 那么这个promise的状态会变为resolve,如果执行了reject(), 那么这个promise的状态就会变成rejected, 而且这些状态是不可撤销的,一经更改,不会再变了;

  then方法:

  promise有一个then方法,then方法接收两个参数, 第一个为函数的成功回调, 第二个为函数的失败回调:

var promise = new Promise(function(resolve , reject) {resolve(); //执行成功回调;
});
console.log(0);
promise.then(function(val) {console.log(1); 
}, function() {console.log("失败");
});
console.log("2");
var promise = new Promise(function(resolve , reject) {reject();
});
console.log(0);
promise.then(function(val) {console.log(1);
}, function() {console.log("失败");
});
console.log("2");

  then方法每一次都是返回不同的Promise实例,then的第一个参数是成功回调, 这个成功回调的参数为: 上一个Promise实例执行resolve方法的参数;

  一般来说, then方法会返回当前的promise, 如果在then方法里面return 一个新的Promise实例,那么此时的then返回的就是新的Promise实例, 利用这个特性,就可以实现多层回调

new Promise(function(resolve , reject) {resolve(1);
}).then(function(val) {console.log(val);return new Promise(function(resolve , reject) {resolve(2);});
}).then(function(val) {console.log(val);return new Promise(function(resolve , reject) {resolve(3);});
}).then(function(val) {console.log(val);return new Promise(function(resolve , reject) {resolve(4);});
}).then(function(val) {console.log(val);
});

  不管代码是异步还是同步的, 都可以用Promise的then方法, 同步的代码直接写在then方法第一个参数, 把需要参数通过resolve传给下一个then方法,

  如果是异步的代码, 就直接return一个Promise实例:

new Promise(function(resolve , reject) {resolve(1);
}).then(function(val) {console.log(val);return 2;
}).then(function(val) {console.log(val);return 3;
}).then(function(val) {console.log(val);return new Promise(function(resolve,reject) {//异步操作些这里resolve(4);});
}).then(function(val) {console.log(val);return 5;
}).then(function(val) {console.log(val);
});

以上只是Promise的一些基础知识, 还有一些其他的知识点, 因为能力有限不一一介绍了(Promise.resolve的不同参数, 与Generator一起使用, Promise的附加方法, 等等等等);

转载于:https://www.cnblogs.com/xunf/p/8588156.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/250777.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软工作业PSP与单元测试训练

一、实现模块判断传入的身份证号码的正确性; 二、针对所实现的模块编写对应的单元测试代码; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.GregorianCalendar; import java.u…

koa --- nunjucks

安装: npm install koa-nunjucks-2 --save目录结构 |--- controller/ | |--- home.js |--- service/ | |--- home.js |--- views/ |--- app.js |--- router.jsapp.js // (部分) const nunjucks require(koa-nunjucks-2); app.use(nunjucks({ext: html,path: path.joi…

DNN模型训练词向量原理

转自:https://blog.csdn.net/fendouaini/article/details/79821852 1 词向量 在NLP里,最细的粒度是词语,由词语再组成句子,段落,文章。所以处理NLP问题时,怎么合理的表示词语就成了NLP领域中最先需要解决的…

天平称重【递归解法】

用天平称重时,我们希望用尽可能少的砝码组合称出尽可能多的重量。如果只有5个砝码,重量分别是1,3,9,27,81则它们可以组合称出1到121之间任意整数重量(砝码允许放在左右两个盘中)。 本…

算法 --- reduce的使用.

描述: 难点: 将[[‘a’,‘b’,‘c’],[‘d’,‘e’,‘f’]]输出为[“ad”, “ae”, “af”, “bd”, “be”, “bf”, “cd”, “ce”, “cf”]. 关键代码描述: 1.假设我们已经根据输入的数字得到了 rawArr [[‘a’,‘b’,‘c’],[‘d’,‘e’,‘f’]] 2. 下一步将rawArr[0…

SpringBoot、mysql配置PageHelper插件

一:https://blog.csdn.net/h985161183/article/details/79800737 主要异常:org.springframework.beans.factory.BeanCreationException: Error creating bean with name com.github.pagehelper.autoconfigure.PageHelperAutoConfiguration: pageHelper.…

字符串的拆分以及分隔符所在不同位置的删除

try { //根据imComuserGroupMng获取这个数据库的所有ImComuserGroup数据 List<ImComuserGroup> list imComuserGroupMng.findAllComuserGroup(); //便利实体数据list为数据的集合 …

算法 --- 递归生成括号

问题描述 思路: 1.首先生成n个括号 2.左括号数量(记为l)不超过n 3.右括号数量(记为r)不超过n,且优先生成左括号(即 l < r) 4.需要设计一个递归式h(str,l,r) // 一开始,str , l 0, r 0 // 第一步进去,添加左括号, str(, l 1, r 0 // 然后因为 l < n . r < l 所以…

使用 TypeScript 改造构建工具及测试用例

最近的一段时间一直在搞TypeScript&#xff0c;一个巨硬出品、赋予JavaScript语言静态类型和编译的语言。 第一个完全使用TypeScript重构的纯Node.js项目已经上线并稳定运行了。 第二个前后端的项目目前也在重构中&#xff0c;关于前端基于webpack的TypeScript套路之前也有提到…

JavaScript 验证表单不为空和获取select下拉列表的值和文本

1.验证表单不为空 var hasform { "Name": "名字", "Id_card": "身份证", "PaySalary": "月工资", "CardCode": "账号", "Fk_Subjectf_Code": &quo…

javascript --- 变量污染全局作用域问题解决方案

日常写法 // 假设你写了几个关于某个某块的函数 function foo1 () {...} function foo2 () {...} function foo3 () {...}出现问题:假设你的团队中也有一个人定义了foo1函数,那么你写的将会覆盖以前的函数,或者会被覆盖掉.若前面使用let声明了foo1变量.将会报错. 解决污染 你…

solr7.4 安装与使用

1.solr7环境要求 solr7需要java8环境&#xff0c;且需要在环境变量中添加 JAVA_HOME变量。 2.solr 安装 下载地址 https://lucene.apache.org/solr/mirrors-solr-latest-redir.html 我下载为7.4版本 在solr5以前solr的启动都有tomcat作为容器&#xff0c;但是从solr5以后solr内…

初入HTML5

在最开始接触HTML5的时候&#xff0c;你会遇到的大多是一些常见常用的属性以及属性值。它们分类广、品种杂且使用率高。到css各种样式的时候&#xff0c;你会接触到更多的东西&#xff0c;各种属性、选择器、盒子模型都是重点。那么&#xff0c;现在我们就看一下它们到底是什么…

javascript --- 让函数的实例可以链式调用

关键: 在每个函数的末尾加上 return thisthis:在javascript中表示当前的对象 栗如: 有以下函数 var fooObj {foo1: function() {console.log(1);},foo2: function() {console.log(2);},foo3: function() {console.log(3);} }// 你想通过 fooObj.foo1().foo2().foo3() // …

ReactiveCocoa基础

本文转载自最快让你上手ReactiveCocoa之基础篇&#xff0c;在此基础上稍作修改&#xff0c;欢迎交流。 有关对 ReactiveCocoa 的看法可以看一下唐巧的这篇ReactiveCocoa 讨论会 ReactiveCocoa思维导图ReactiveCocoa简介 ReactiveCocoa&#xff08;简称为RAC&#xff09;,是由Gi…

javascript --- 创建一个二维数组

想创建一个 n*n 的矩阵,并全部赋予初始值false 你可能会想到下面 let arr []; for(let i 0 ;i< n;i) {arr[i] [];for( let j 0; j< n; j){arr[i][j] false;} }稍微封装一下: function Cmatrix(n, c) {let arr [];for (let i 0; i < n; i) {arr[i] [];for (le…

配置OpenCV产生flann\logger.h(66): error C4996: ‘fopen': This function or variable may be unsafe问题

转载自&#xff1a;http://guoming.me/%E9%85%8D%E7%BD%AEopencv%E4%BA%A7%E7%94%9Fflannlogger-h66-error-c4996-fopen-this-function-or-variable-may-be-unsafe%E9%97%AE%E9%A2%98 今天使用vs2012配置OpenCV编译出现问题: 1>—— 已启动生成: 项目: Win32ForOpenCV245, 配…

android listview和simpleadapter 给itme 中的控件添加事件

simpleAdapter.setViewBinder(new SimpleAdapter.ViewBinder() { Override public boolean setViewValue(View view, Object data, String textRepresentation) {   Log.d("进入setview","进入setview");if(view instanceof Button &&am…

0 uC/OS 系统精讲索引

uC/OS-II与uC/OS-III放在一起讲&#xff0c;每个例程同时提供两个版本的源代码。 本系列教程主要涉及如下内容&#xff1a; 【原理部分】 1-操作系统简介&#xff1a;基本概念 2-目录结构与测试环境搭建&#xff1a;uC/OS-III emWin VS2015 2.1 官方文件目录结构 【*】uC/Lib …

OPENCV-1 学习笔记

灰度图&#xff1a;2维矩阵 彩色图&#xff1a;3维矩阵 ps&#xff1a;目前大部分设备都是用无符号 8 位整数&#xff08;类型为 CV_8U&#xff09;表示像素亮度 Mat类定义&#xff1a; class CV_EXPORTS Mat { public://一系列函数.../* flag 参数中包含许多关于矩阵的信息…