Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

上面两段话是阮大神对于promise对象的一些总结,我再浓缩一下

  Promise就是用于处理异步操作的!
   关于异步操作和同步操作的区别以及他们在浏览器中的表现形式,可以转至这篇文章了解一下

  为什么要处理异步操作?
  需求1:
  在你登录一个网站的时候,这个网站的所有信息都依赖于当前用户的id才能获取,而要得知用户的id,取决于登录接口的返回值。因此,只有当获取用户信息的接口访问成功后,你才能拿到id,才能继续执行别的ajax。(当然实际情况下,id值如此重要的情况下应该保存在session或者cookie中用于前后端交互)

由于异步操作的特殊性,大多数情况下,你还没有拿到用户id,其他的接口请求就带着id为undefined的请求头发出去了,这样就会导致你拿不到其他接口的数据,打开network,可以看到请求头里的user_id都是undefined。

如果要避免这种情况的发生,ajax提供了是否需要对当前接口进行同步操作处理的参数,默认情况下资源请求都是异步的。这是一种方法,当然不可避免地,这个接口会阻塞当前进程,使得其他接口在这个接口状态变成success之前都处于阻塞状态。

  ES6提供了更加优雅的解决方案 --- promise()
  在解决上述问题之前,先来介绍下promise的一些用法和常识。

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject,这两个参数都是函数,如下所示

new Promise(function(resolve,reject){
异步操作 ajax 定时器等{
if(结果满意)
resolve(value)
else
reject(error)
}
})

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。如下所示

function timeout(ms) {
return new Promise((resolve, reject) => {
if(ms>=)
setTimeout(resolve, ms, 'done'); //setTimeout的第三个参数用于给第一个参数(函数)传参
else
setTimeout(reject, ms, 'error'); //setTimeout的第三个参数用于给第一个参数(函数)传参
});
}
timeout().then((value) => {
console.log(value); //done
},(error)=>{
console.log(error)
});
timeout().then((value) => {
console.log(value);
},(error)=>{
console.log(error) //error
});

promise实例上除了then(),还有catch和finally方法。

catch方法用于指定发生错误时的回调,也就是.then(null,function()),稍微修改下上面的代码

timeout().then((value) => {
console.log(value);
}.catch((error)=>{
console.log(error)
});

当然作者不会那么闲的蛋疼,为了这点小事搞个catch出来,catch还有个功能他可以检测resolve中抛出的异常,也就是说如果resolve中发生异常,JS不会报错,而会把错误抛给catch的第一个参数,如果你写了的话。如下

timeout().then((value) => {
console.log(value);
console.log(somethingUndefined)
}).catch((error)=>{
console.log(error) //somethingUndefined is not defined
});

finally()方法不能传入任何参数,他可以在当前promise状态改变后执行,至于前面的异步操作是否成功执行,跟他无关,也就是说,finally只跟当前异步操作是否执行完毕有关,比如我想在某个异步操作之后,执行一个动画,那么动画跟数据是否传输成功并没有什么关系,不管是成功还是NaA还是undefined,我都可以愉快的执行动画。

简单了解了promise后,大概可以解决需求1中的问题了,来看一场4*100接力赛吧

// 4 * 100 接力赛

let [man1,man2,man3,man4] = [{v:,rank:},{v:,rank:},{v:,rank:},{v:,rank:}]
let runningRace = (man) => {
return new Promise((resolve,reject) => {
// setTimeout的计算单位是毫秒,乘以100效果好一些
setTimeout(resolve,/man['v']*,'rank'+ man['rank'] +'跑了' + /man['v'] + 's')
})
}
runningRace(man1).then((info)=>{
console.log(info)
return runningRace(man2)
}).then((info)=>{
console.log(info)
return runningRace(man3)
}).then((info)=>{
console.log(info)
return runningRace(man4)
}).then((info)=>{
console.log(info)
})

上面这个接力的例子,已经完美的解决了异步操作中的先后执行问题。同时,链式操作的方式使得代码的易读性更强,你无需在回调的嵌套中一步步走入深渊。

  需求2:
   如果一个接口的访问时间超过400毫秒就算超时,如何解决。

传统的解决思路(在面试的时候想到的),设个定时器,设个全局变量data接受接口要返回的数据,如果400毫秒后,定时器的全局data还未被赋值,说明接口请求超时,当然这种做法不够优雅,如果用promise()呢?

// 接口超时模拟
function ajaxTimeOut(){
return new Promise(function(resolve,reject){
let data = null
// ajax操作用setTimeout模拟
setTimeout(function(){
data = '真实数据来了'
},)
setTimeout(function(){
if(data === null){
reject('接口访问超时')
} else {
resolve(data)
}
},)
})
}
ajaxTimeOut().then(function(data){
console.log('success,data is' + data)
}).catch(function(err){
console.log('err信息:'+err)
})

看起来好像解决了,但是怎么看怎么像愚蠢的解决方案嵌套了一层美丽的皮囊。

promise下还有两个重要的方法没有提到,分别是all()和race()

Promise.all方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

上面代码中,Promise.all方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。

p的状态由p1、p2、p3决定,分成两种情况。

(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。

(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

现在我们来改造一下刚才的4*100接力赛,下面进行的是100米的个人赛,我们将在比赛结束后统计结果

Promise.all([runningRace(man1),runningRace(man2),runningRace(man3),runningRace(man4)])
.then(function(results){
console.log(results)
})

可以看到,在比赛结束后(用时最长的异步加载成功后),统计的结果以数组的形式放在第一个参数中。

Promise.race方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。

const p = Promise.race([p1, p2, p3]);

上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。

Promise.race方法的参数与Promise.all方法一样,如果不是 Promise 实例,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。

说这么多,反正race的意思就是比赛,就是比哪个异步操作的速度快,改造一下跑步的代码

// 跑步比赛
Promise.race([runningRace(man1),runningRace(man2),runningRace(man3),runningRace(man4)])
.then(function(result){
console.log(result) //谁跑得快输出谁,别的人都忽略
})

上述的结果只有一个,那就是,第一名!

ok,下面来解决下超时的需求,代码如下。

// 接口超时模拟2

// 接口超时模拟2
function ajax(){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve('success')
},)
})
}
function timeOut(){
return new Promise(function(resolve,reject){
setTimeout(function(){
reject('超时')
},)
})
}
Promise.race([ajax(),timeOut()])
.then(function(data){
console.log(data)
})
.catch(function(err){
console.log(err)
})

ES6语法(3)—— 用promise()对象优雅的解决异步操作的更多相关文章

  1. ES6系列_14之promise对象的简单使用

    1.产生原因 在前端开发中,最常见的的就是"回调",我相信很多人对于这个"回调"可谓是印象深刻呢.究其原因是因为层层回调会造成所谓的“回调地狱 (callbac ...

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

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

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

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

  4. es6 语法 (类与对象)

    { // 基本定义和生成实例 class Parent{ constructor(name='mukewang'){ this.name=name; } } let v_parent1=new Par ...

  5. ES6语法——Promise对象

    一.概念 Promise是异步编程的一种解决方案(解决回调地狱的问题),是一个能够获取异步操作信息的对象.Promise的内部保存着某个未来才会结束的事件(通常是一个异步操作) 二.特点 1.Prom ...

  6. ES6的Promise对象

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

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

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

  8. ES6深入学习记录(二)promise对象相关

    1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和强大.ES6将其写进了语言标准,统一了用法,原生提供了promise对象. 所谓Promis ...

  9. ES6 Promise 对象

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

随机推荐

  1. Introducing DataFrames in Apache Spark for Large Scale Data Science(中英双语)

    文章标题 Introducing DataFrames in Apache Spark for Large Scale Data Science 一个用于大规模数据科学的API——DataFrame ...

  2. BizTalk Map 累积连接字符串

    更多内容请查看:BizTalk动手实验系列目录                             BizTalk 开发系列 BizTalk 培训/项目开发/技术支持请联系:Email:cbcye ...

  3. Excel公式笔记

    跨表,查找相同的数据,的其他列的值 =index(sheet2!$c$:$c$,match(sheet1!$b$,sheet2!$d$:$d$,)) 备注: =index(读哪里的数据(大范围), m ...

  4. mysqldump定时备份数据库

    mysql服务器ip:192.168.0.10 备份服务器ip:192.168.0.11 数据库名称:db_product 思路:在mysql服务器A上创建一个用户分配权限专门用于数据库备份,A服务器 ...

  5. Android Bluetooth hci 命令分析

    Android在连接BLE设备的时候,遇到连接没多久就自动断开的情况.通过HCI来分析一下. BLE设备发送连接参数更新请求 3909 15:53:01.224737 TexasIns_f0:d3:4 ...

  6. OpenGL normalMap

    参考zwqxin的博客  http://www.zwqxin.com/ shader 来自zwqxin,稍作修改 <-vertex-> attribute vec3 v_Pos; attr ...

  7. Linux下批量Kill多个进程

    ps -ef|grep php|grep -v grep|cut -c 9-15|xargs kill -9 管道符"|"用来隔开两个命令,管道符左边命令的输出会作为管道符右边命令 ...

  8. 21备忘录模式Memento

    一.什么是备忘录模式 Memento模式也叫备忘录模式,是行为模式之 一,它的作用是保存对象的内部状态,并在需要 的时候(undo/rollback)恢复对象以前的状态. 二.备忘录模式的应用场景 如 ...

  9. winrar压缩过滤文件及文件夹

    代码: .git .git\* .svn .svn\* .git~\* .git~ build\* build vsout\* vsout *.obj *.sdf *.opensdf game目录: ...

  10. Writing custom protocol for nanomsg

    http://vitiy.info/writing-custom-protocol-for-nanomsg/ nanomsg is next version of ZeroMQ lib, provid ...