What is Promise?

Promise是一个构造函数,接受一个参数(Function),并且该参数接受两个参数resolve和reject(分别表示异步操作执行成功后的回调函数、执行失败后的回调函数)

var p = new Promise(function(resolve, reject){
setTimeout(function(){
console.log('执行完成');
resolve('成功了!');
}, 2000);
});

运行代码,2秒后输出“执行完成”。注意,这里只是new了一个对象,并没有调用它,所以我们用Promise时是包在一个函数中的,如下:

function runAsync(){
  var p = new Promise(function(resolve, reject){
  setTimeout(function(){
  console.log('执行完成');
  resolve('成功了!');
  }, 2000);
  });
  return p;
}
runAsync();

Pormise的优势:

1. 解决回调函数层层嵌套的问题:

(1) 有时我们需要进行一些有依赖关系的异步操作,比如有多个请求,后一个请求需要上一次请求的返回结果,过去常规的做法是使用callback层层嵌套,这样的代码可读性和维护性都很差,比如:

firstAsync(function(data){
//处理得到的 data 数据
//....
secondAsync(function(data2){
//处理得到的 data2 数据
//....
thirdAsync(function(data3){
//处理得到的 data3 数据
//....
});
});
});

(2) 使用Promise的话,代码就会变得扁平化,可读性更高了。比如:

firstAsync()
.then(function(data){
//处理得到的 data 数据
//....
return secondAsync();
})
.then(function(data2){
//处理得到的 data2 数据
//....
return thirdAsync();
})
.then(function(data3){
//处理得到的 data3 数据
//....
});

2.  更好的进行错误捕捉:

(1) 使用callback嵌套,可能会造成无法捕捉异常、异常捕捉不可控等问题。比如:

function fetch(callback) {
setTimeout(() => {
throw Error('请求失败')
}, 2000)
} try {
fetch(() => {
console.log('请求处理') // 永远不会执行
})
} catch (error) {
console.log('触发异常', error) // 永远不会执行
} // 程序崩溃
// Uncaught Error: 请求失败

(2) 使用Promise的话,通过reject方法吧Promise的状态置为rejected,这样我们就可以在then方法中捕捉到,并且执行“失败”情况的回调。比如:

function fetch(callback) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('请求失败');
}, 2000)
})
} fetch()
.then(
function(data){
console.log('请求处理成功!');
console.log(data);
},
function(reason, data){
console.log('触发异常!');
console.log(reason);
}
);

同时,也可以在catch方法中处理reject回调。比如:

function fetch(callback) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('请求失败');
}, 2000)
})
} fetch()
.then(
function(data){
console.log('请求处理成功!');
console.log(data);
}
)
.catch(function(reason){
console.log('触发异常!');
console.log(reason);
});

在上面的代码中我们用到了Promise的then、catch方法,下面我们再来介绍一下Promise中常用的一些方法。

then方法:

then方法就是将原来使用callback回调的写法分离出来,在异步操作完成之后,使用链式调用的方法执行回调函数。

then方法包含三个参数:

  • 成功回调
  • 失败回调
  • 前进回调(规范没有要求实现前进回调)

返回一个Promise对象,也可以直接返回一个数据。比如:

function runAsync1(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务1执行完成');
resolve('成功了1');
}, 1000);
});
return p;
} function runAsync2(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务2执行完成');
resolve('成功了2');
}, 2000);
});
return p;
} runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return '直接返回数据'; //这里直接返回数据
})
.then(function(data){
console.log(data);
}); /*
输出:
异步任务1执行完成
成功了1
异步任务2执行完成
成功了2
直接返回数据
*/

resolve方法:

该方法把Promise的状态置为完成态(Resolved),这是then方法就能捕捉到变化,并执行“成功”回调的方法。比如:

//做饭
function cook(){
console.log('开始做饭。');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('做饭完毕!');
resolve('鸡蛋炒饭');
}, 1000);
});
return p;
} //吃饭
function eat(data){
console.log('开始吃饭:' + data);
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('吃饭完毕!');
resolve('完成!');
}, 2000);
});
return p;
}

使用then链式调用:

cook()
.then(function(data){
return eat(data);
})
.then(function(data){
console.log(data);
}); //可以简写
cook()
.then(eat)
.then(function(data){
console.log(data);
}); /*
输出:
开始做饭。
做饭完毕!
开始吃饭:鸡蛋炒饭
吃饭完毕
完成!
*/

reject方法:

该方法把Promise的状态置为已失败(rejected),then方法捕捉到变化,并执行“失败”回调的方法。比如:

//做饭
function cook(){
console.log('开始做饭。');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('做饭失败!');
reject('烧焦的米饭');
}, 1000);
});
return p;
} //吃饭
function eat(data){
console.log('开始吃饭:' + data);
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('吃饭完毕!');
resolve('完成!');
}, 2000);
});
return p;
} cook()
.then(eat, function(data){
console.log(data + '没法吃!');
}) /*
输出:
开始做饭。
做饭失败!
烧焦的米饭没法吃!
*/

catch方法:

1. 和then方法的第二个参数reject方法用法一致,执行“失败”回调方法

cook()
.then(eat)
.catch(function(data){
console.log(data + '没法吃!');
});

2. 当执行第一个参数resolve方法时,如果抛出了异常(代码错误),js不会卡死,而进入到catch方法中

//做饭
function cook(){
console.log('开始做饭。');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('做饭完毕!');
resolve('鸡蛋炒饭');
}, 1000);
});
return p;
} //吃饭
function eat(data){
console.log('开始吃饭:' + data);
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('吃饭完毕!');
resolve('完成!');
}, 2000);
});
return p;
} cook()
.then(function(data){
throw new Error('米饭被打翻了!');
eat(data);
})
.catch(function(data){
console.log(data);
}); /*
输出:
开始做饭。
做饭完毕!
Error:米饭被打翻了!
at:xxx.html
*/
还可以添加多个 catch,实现更加精准的异常捕获。比如:
somePromise.then(function() {
return a();
}).catch(TypeError, function(e) {
//If a is defined, will end up here because
//it is a type error to reference property of undefined
}).catch(ReferenceError, function(e) {
//Will end up here if a wasn't defined at all
}).catch(function(e) {
//Generic catch-the rest, error wasn't TypeError nor
//ReferenceError
});

all方法:

该方法提供了并行执行异步操作的能力,在所有异步操作执行完毕之后才会进入到then方法中执行回调方法。

all方法接受一个数组,里面的值最终都返回一个Promise对象。all会把所有的异步操作的结果放到一个数组中传递给then方法。比如//切菜

function cutUp(){
console.log('开始切菜。');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('切菜完毕!');
resolve('切好的菜');
}, 1000);
});
return p;
} //烧水
function boil(){
console.log('开始烧水。');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('烧水完毕!');
resolve('烧好的水');
}, 1000);
});
return p;
} Promise
.all([cutUp(), boil()])
.then(function(results){
console.log("准备工作完毕:");
console.log(results);
}); /*
输出:
开始切菜。
开始烧水。
切菜完毕!
烧水完毕!
准备工作完毕:
["切好的菜","烧好的水"]
*/

race方法:

race按字面意思是,竞赛/赛跑。与all不同的是,所有的异步操作中只要有一个异步操作完成,就立即执行then回调方法。比如:

Promise
.race([cutUp(), boil()])
.then(function(results){
console.log("准备工作完毕:");
console.log(results);
}); /*
输出:
开始切菜。
开始烧水。
切菜完毕!
准备工作完毕:
切好的菜
烧水完毕!
*/

race 使用场景很多。比如我们可以用 race 给某个异步请求设置超时时间,并且在超时后执行相应的操作。比如:

//请求某个图片资源
function requestImg(){
var p = new Promise(function(resolve, reject){
  var img = new Image();
  img.onload = function(){
  resolve(img);
  }
  img.src = 'xxxxxx';
});
return p;
} //延时函数,用于给请求计时
function timeout(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
reject('图片请求超时');
}, 5000);
});
return p;
} Promise
.race([requestImg(), timeout()])
.then(function(results){
console.log(results);
})
.catch(function(reason){
console.log(reason);
});

上面代码 requestImg 函数异步请求一张图片,timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑,结果如下:

  • 如果 5 秒内图片请求成功,那么便进入 then 方法,执行正常的流程。
  • 如果 5 秒钟图片还未成功返回,那么则进入 catch,报“图片请求超时”的信息。

ES6 Promise用法详解的更多相关文章

  1. Es6 Promise 用法详解

     Promise是什么??    打印出来看看  console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...

  2. es6的promise用法详解

    es6的promise用法详解 promise 原理 promise是es6的异步编程解决方案, 是es6封装好的对象: 一个promise有三种状态:Pending(进行中).Resolved(已完 ...

  3. ES6之Promise用法详解

    一 前言 本文主要对ES6的Promise进行一些入门级的介绍.要想学习一个知识点,肯定是从三个方面出发,what.why.how.下面就跟着我一步步学习吧~ 二 什么是Promise 首先是what ...

  4. promise用法详解

    es6的promise可谓是异步书写的一大福音,过去异步js书写是函数嵌套函数的方式,promise出现后书写异步js代码就变得美观得多了 以前的写法:回调函数不停嵌套 ajax('/banners' ...

  5. JS - Promise使用详解--摘抄笔记

    第一部分: JS - Promise使用详解1(基本概念.使用优点) 一.promises相关概念 promises 的概念是由 CommonJS 小组的成员在 Promises/A 规范中提出来的. ...

  6. Vue1.0用法详解

    Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...

  7. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...

  8. @RequestMapping 用法详解之地址映射

    @RequestMapping 用法详解之地址映射 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...

  9. linux管道命令grep命令参数及用法详解---附使用案例|grep

    功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...

随机推荐

  1. 在mac上使用sublime text3搭建opencv3开发环境

    安装sublime text3 打开mac终端,安装brew 安装opencv3,终端输入下面的coomand: brew install opencv@3 注意:@3表示安装的版本,如果不加@3,那 ...

  2. 为什么Python如此慢

    Python当前人气暴涨.它在DevOps,数据科学,Web开发和安全领域均有使用. 但是在速度方面没有赢得美誉. 这里有关于Python比较其他语言如,Java, C#, Go, JavaScrip ...

  3. iOS客户端与网页交互文档

    很少和客户端打交道,这次由于做会活动,要和客户端配合做个分享的功能 这里总结下基本的流程,就是前端在H5 里调用客户端的方法即可 第一部分 客户端提供需求文档 网页请求设置 客户端发起请求时在HTTP ...

  4. linux下.exe文件的安装与使用

    1安装wine 2 安装exe软件:下载应用软件.exe,然后点击右键用wine打开/或者在终端中wine 应用软件.exe即能安装. 卸载exe可以右键点击安装软件中uninstall.exe-用w ...

  5. bzoj 3732: Network 树上两点边权最值

    http://www.lydsy.com/JudgeOnline/problem.php?id=3732 首先想到,要使得最长边最短,应该尽量走最短的边,在MST上. 然后像LCA那样倍增娶个最大值 ...

  6. Spark编程环境搭建及WordCount实例

    基于Intellij IDEA搭建Spark开发环境搭建 基于Intellij IDEA搭建Spark开发环境搭——参考文档 ● 参考文档http://spark.apache.org/docs/la ...

  7. QT学习小demo之LightMD(MarkDown编辑器)

    很早之前就有了写一个类似Windows记事本的想法,加上最近也刚好在学编译原理,所以就想把两者结合起来,于是就打算结合MarkDown,开发一款MarkDown编辑器. 不过由于我之前一直使用的是Ja ...

  8. varnish与squid的比较

    生产环境中尝试使用varnish替代squid的主要原因: 1. squid不支持多核cpu, 生产环境中大多使用Dell R610系列,这种类型机器配置为2个4核双线程cpu, 操作系统识别为16个 ...

  9. JAVA实现向文本文件中多次写入数据

    使用这种方式,当指定的文件不存在时会自动创建. //此处设置为true即可追加 FileWriter out = new FileWriter("D:\\1.txt",true); ...

  10. 引用 Session详解 作者:郎云鹏

    本文转载自leeldy<Session详解 作者:郎云鹏>   引用 leeldy 的 Session详解 作者:郎云鹏 目录: 一.术语session 二.HTTP协议与状态保持 三.理 ...