ES6系列_14之promise对象的简单使用
1.产生原因
在前端开发中,最常见的的就是"回调",我相信很多人对于这个"回调"可谓是印象深刻呢。究其原因是因为层层回调会造成所谓的“回调地狱 (callback hell)”(最明显的就是代码的层层嵌套)
2.解决办法
实解决回调地狱的办法有很多,从代码书写层面就可以将绝大部分回调代码写的尽量简单易懂。这里主要是关于Promise 的。
Promise
自 ES6 起成为 Javascript 的语言标准。但是其最早是由 Javascript 社区提出并实现的。Promise
规范和标准了异步操作 API,基本上所有的异步操作都可以使用Promise
的写法处理。Promise
对象内部保存着异步操作的结果,并通过链式调用的方式避免了回调函数层层嵌套的写法。
3.基本用法
new Promise((resolve, reject) => {
resolve('success')
}).then(res => { console.log(res) // success })
Promise构造函数接收一个函数作为参数,这个函数的两个参数分别为resolve和reject。这也是两个函数,其值会由 Javascript 传入,使用者只需要在异步操作完成时调用resolve函数并传入下一步操作所需要的值即可。使用者可以通过链式调用的方式为Promise对象添加后续操作。
reject函数则是在异步操作发生异常时被调用,此时Promise可以捕获到传入reject参数中的值。
下面通过一个简单的小例子学习试用一下Promise:
promise执行多步操作非常好用,那我们就来模仿一个多步操作的过程,那就以吃饭为例吧。要想在家吃顿饭,是要经过三个步骤的。
- 洗菜做饭。
- 坐下来吃饭。
- 收拾桌子洗碗。
这个过程是有一定的顺序的,你必须保证上一步完成,才能顺利进行下一步
为了方便代码结构的查看,
1.首先将上述三个步骤封装成三个函数(供Promise调用)
let isOk=true //默认全部通过
//第一步
function step1(resolve,reject) {
console.log('1.开始-洗菜做饭');
if(isOk){
resolve('洗菜做饭--完成');
}else{
reject('洗菜做饭--出错');
}
}
//第二步
function step2(resolve,reject) {
console.log('2.开始-坐下来吃饭');
if(isOk){
resolve('坐下来吃饭--完成');
}else{
reject('坐下来吃饭--出错');
}
} //第三步
function step3(resolve,reject) {
console.log('3.开始-收拾桌子洗完');
if(isOk){
resolve('收拾桌子洗完--完成');
}else{
reject('收拾桌子洗完--出错');
}
}
2.然后使用Promise来按顺序执行上述过程
new Promise(step1).then(function(val){
console.log(val);
return new Promise(step2);
}).then(function(val){
console.log(val);
return new Promise(step3);
}).then(function(val){
console.log(val);
return val;
});
最终输出到控制台的结果为:
通过上述我们对Promise有了基本的了解,后续我们将继续深入学习。
ES6系列_14之promise对象的简单使用的更多相关文章
- Promise对象的简单用法
要了解一个东西,首先要从,它是什么.用来做什么以及怎么取用它这三个方面来了解. 首先,promise是什么? 我们来参考一下MDN对它的定义: Promise 对象用于一个异步操作的最终完成(或失败) ...
- ES6 - 基础学习(8): Promise 对象
概述 Promise是异步编程的一种解决方案,比传统的解决方案(多层嵌套回调.回调函数和事件)更强大也更合理.从语法上说,Promise是一个对象,从它可以获取异步操作的消息,Promise 还提供了 ...
- ES6基础知识(Promise 对象)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ES6 Promise 对象
Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Pro ...
- ES6的Promise对象
http://es6.ruanyifeng.com/#docs/promise Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise ...
- ES6的新特性(15)——Promise 对象
Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了 ...
- 微信小程序Promise对象
Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise.prototype.catch() Promise.prototype.fin ...
- Promise对象的含义和基本用法
1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件 (通常是一 ...
- 13.Promise 对象
Promise 对象 Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其 ...
随机推荐
- 020PHP基础知识——函数(三)
<?php /** * 任何数量的参数: * func_get_args() 接收一个数组,数组里面包含所有参数 * func_num_args() 取得共有几个参数 * func_get_ar ...
- 017PHP基础知识——流程控制语句(五)
<?php /** * break;退出循环: * 语法结构:break int;可以指定跳过几级循环: * while do_while for foreach switch */ /*$i= ...
- Android自定义view控件
转载自: http://blog.163.com/ppy2790@126/blog/static/103242241201382210910473/ 开发自定义控件的步骤: 1.了解View的工作原理 ...
- 前端常用框架和js插件 UI组件等
前言:写这个随笔,是记录一下工作以来用到的各种框架.以免日后忘记: JS库: 1. jquery.js 2. zepto.js ----jquery的精简版,专门用于手机上的,但是zepto主体默认是 ...
- java 生成xml文件
这里也使用的是import org.w3c.dom.Document; 首先创建document对象,给该对象赋值,然后将document对象使用transformer的transformer转换方法 ...
- ubuntu:NVIDIA设置性能模式,以降低CPU使用、温度
NVIDIA设置性能模式,以降低CPU使用.温度 ubuntu安装完NVIDIA显卡驱动后 终端输入 nvidia-settings 选择OpenGL Settings->Image Setti ...
- 最大流之dinic
先用bfs预处理出层次图,然后在层次图上用dfs找增广路径,理论复杂度O(n*n*m) const int INF=0xfffffff ; struct node { int s,t,cap,nxt ...
- ubuntu 11.04 old sources.list
#deb cdrom:[Ubuntu 11.04 _Natty Narwhal_ - Release amd64 (20110427.1)]/ natty main restricted # See ...
- 把mac地址转换为标准mac地址
把"00:90:8A:1D:30:51"转换成"00-90-8A-1D-30-51",如何格式错误,显示出格式错误的种类,有些不规范的转换成规范的格式,例如,& ...
- Codeforces 1006C:Three Parts of the Array(前缀和+map)
题目链接:http://codeforces.com/problemset/problem/1006/C (CSDN又改版了,复制粘贴来过来的题目没有排版了,好难看,以后就截图+题目链接了) 题目截图 ...