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. 洗菜做饭。
  2. 坐下来吃饭。
  3. 收拾桌子洗碗。

这个过程是有一定的顺序的,你必须保证上一步完成,才能顺利进行下一步

为了方便代码结构的查看,

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对象的简单使用的更多相关文章

  1. Promise对象的简单用法

    要了解一个东西,首先要从,它是什么.用来做什么以及怎么取用它这三个方面来了解. 首先,promise是什么? 我们来参考一下MDN对它的定义: Promise 对象用于一个异步操作的最终完成(或失败) ...

  2. ES6 - 基础学习(8): Promise 对象

    概述 Promise是异步编程的一种解决方案,比传统的解决方案(多层嵌套回调.回调函数和事件)更强大也更合理.从语法上说,Promise是一个对象,从它可以获取异步操作的消息,Promise 还提供了 ...

  3. ES6基础知识(Promise 对象)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ES6 Promise 对象

    Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Pro ...

  5. ES6的Promise对象

    http://es6.ruanyifeng.com/#docs/promise Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise ...

  6. ES6的新特性(15)——Promise 对象

    Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了 ...

  7. 微信小程序Promise对象

    Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise.prototype.catch() Promise.prototype.fin ...

  8. Promise对象的含义和基本用法

    1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件 (通常是一 ...

  9. 13.Promise 对象

    Promise 对象 Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其 ...

随机推荐

  1. 020PHP基础知识——函数(三)

    <?php /** * 任何数量的参数: * func_get_args() 接收一个数组,数组里面包含所有参数 * func_num_args() 取得共有几个参数 * func_get_ar ...

  2. 017PHP基础知识——流程控制语句(五)

    <?php /** * break;退出循环: * 语法结构:break int;可以指定跳过几级循环: * while do_while for foreach switch */ /*$i= ...

  3. Android自定义view控件

    转载自: http://blog.163.com/ppy2790@126/blog/static/103242241201382210910473/ 开发自定义控件的步骤: 1.了解View的工作原理 ...

  4. 前端常用框架和js插件 UI组件等

    前言:写这个随笔,是记录一下工作以来用到的各种框架.以免日后忘记: JS库: 1. jquery.js 2. zepto.js ----jquery的精简版,专门用于手机上的,但是zepto主体默认是 ...

  5. java 生成xml文件

    这里也使用的是import org.w3c.dom.Document; 首先创建document对象,给该对象赋值,然后将document对象使用transformer的transformer转换方法 ...

  6. ubuntu:NVIDIA设置性能模式,以降低CPU使用、温度

    NVIDIA设置性能模式,以降低CPU使用.温度 ubuntu安装完NVIDIA显卡驱动后 终端输入 nvidia-settings 选择OpenGL Settings->Image Setti ...

  7. 最大流之dinic

    先用bfs预处理出层次图,然后在层次图上用dfs找增广路径,理论复杂度O(n*n*m) const int INF=0xfffffff ; struct node { int s,t,cap,nxt ...

  8. ubuntu 11.04 old sources.list

    #deb cdrom:[Ubuntu 11.04 _Natty Narwhal_ - Release amd64 (20110427.1)]/ natty main restricted # See ...

  9. 把mac地址转换为标准mac地址

    把"00:90:8A:1D:30:51"转换成"00-90-8A-1D-30-51",如何格式错误,显示出格式错误的种类,有些不规范的转换成规范的格式,例如,& ...

  10. Codeforces 1006C:Three Parts of the Array(前缀和+map)

    题目链接:http://codeforces.com/problemset/problem/1006/C (CSDN又改版了,复制粘贴来过来的题目没有排版了,好难看,以后就截图+题目链接了) 题目截图 ...