一个简单的例子搞懂ES6之Promise

内容预览:
  • promise中的异步是这样的: * 每当我需要执行一次异步操作的时候,我都...~
  • 以上三步操作,需要两次异步操作,就需要两个异步的Promise对象 首先是...~
  • 你也可以配合同步代码体验效果: console.log("同步执行111111111") new...~

ES5中实现异步的常见方式不外乎以下几种:

1. 回调函数

2. 事件驱动

2. 自定义事件(根本上原理同事件驱动相同)

而ES6中的Promise的出现就使得异步变得非常简单。promise中的异步是这样的:

* 每当我需要执行一次异步操作的时候,我都需要new一个promise对象

* 每一个异步操作的Promise对象都需要设定一个成功执行的条件和成功的回调、一个失败的条件和失败的回调

* Promise对象可通过执行then()方法获得成功的回调信息

* Promise对象可通过执行catch()方法捕获失败的回调信息(当不执行catch方法时,若异步操作失败会报错)

一次常规异步操作的流程大致是这样的:

    new Promise((resolve, reject)=>{

if(...){ // 设定异步操作成功的条件
resolve() // 设定异步操作成功 并返回 成功的回调信息
}
else{ // 设定异步操作失败的条件
reject() // 设定异步操作失败 并返回 失败的回调
}
})
.then((res)
=>{ //执行异步操作,并且执行成功
..... // 异步操作成功后的后续操作
...
..
})
.
catch((err)=>{ // 执行一步操作,异步操作失败
..... // 操作失败的后续操作
...
..
})

下面首先通过一个简单的例子来基本套用一下异步操作的流程

实际项目中经常会有这样的需求,很多功能都是需要在登录后才能去实现的,比如说我想要查看用户的个人信息,那么这个用户就必须先要登录,那么分解步骤后

第一步: 执行登录并且登录成功

第二步: 登录成功,开始获取用户信息

第三步: 获取用户信息成功,返回用户信息或成功的回调信息。

以上三步操作,需要两次异步操作,就需要两个异步的Promise对象

首先是准备工作:

    // 两个状态用以分别判断两次异步操作是否成功

let status1 = 1;
let status2
= 1;
// 设定登录的异步操作
let doLogin = (resolve, reject) =>{
setTimeout(()
=>{
if(status1 ==1){
resolve()
}
else{
reject();
}
},
2000)
}
// 设定获取用户信息的异步操作
let getUserInfo = (resolve, reject)=>{
setTimeout(()
=>{
if(status2==1){
resolve();
}
else{
reject();
}
},
1000)
}

紧接着开始执行异步操作:

    new Promise(doLogin)

.then((res)
=>{
if(res.status==1){
console.log(res.msg);
return new Promise(getUserInfo) // 若下一步要执行异步操作则必须返回一个promise对象用以链式操作
}
else{
console.log(res.msg);
}
})
.then((res)
=>{
console.log(res.msg)
})
.
catch((err)=>{
console.log(err.msg)
})

感兴趣的可以通过控制status1、status2两个状态码体验一下不同情况下异步操作的流程与结果。

上面的例子搞清楚之后差不多也就理解了promise的基本用法。

你也可以配合同步代码体验效果:

    console.log("同步执行111111111")

new Promise(doLogin)
.then((res)
=>{
if(res.status==1){
console.log(res.msg);
return new Promise(getUserInfo)
}
else{
console.log(res.msg);
}
})
.then((res)
=>{
console.log(res.msg)
})
.
catch((err)=>{
console.log(err.msg)
})
console.log(
"同步执行2222222")

而当你需要实现连续的异步操作时,需要在每一步异步操作后都返回一个promise对象,否则执行的还是同步操作。下面的例子可以证明:

    let afterLogin1 = ()=>{

console.log(
"登录后续操作1")
}
let afterLogin2
= ()=>{
console.log(
"登录后续操作2")
}

new Promise(doLogin)
.then((res)
=>{
console.log(res.msg)
})
.then((res)
=>{
setTimeout(()
=>{
afterLogin1();
},
1000)
})
.then((res)
=>{
afterLogin2();
})

例子的输出结果为:

异步执行 login ok

登录后续操作2

登录后续操作1

 

以上就是:一个简单的例子搞懂ES6之Promise 的全部内容。

本站部分内容来源于互联网和用户投稿,如有侵权请联系我们删除,谢谢。
Email:[email protected]


0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论