promise与async和await的使用,移动混合开发模式

使用方法

//第一步:创建 Promise 对象

const p = new Promise((resolve,reject) => {

//生成一个随机数 [0,2]

const num = Math.random*2

//使用定时模仿异步操作

setTimeout(function(){

if(num < 1){

//调用 resolve

resolve(“sucess”)

}else{

//调用 reject

reject(“fail”)

}

},1000)

})

console.log(“程序结束了”)

// then 匿名函数对应着 resolve回调;catch 匿名函数对应着 reject回调

p.then((value) => {

console.log(value)

}).catch((err) => {

console.log(err)

})

运行结果

![](https://img-blog.
csdnimg.cn/20210723205050729.png)

可以很明显的看到  Promise 是为异步编程解决”回调地狱“的一种方案。他和传统回调函数的区别在于:

Promise最大的好处是在异步执行的流程中,把执行代码处理结果的代码清晰地分离了

promise

易错点点拨

我想在 setTimeout() 前面加上这么一句话 console.log(“哈哈哈,你知道我什么时候执行吗”),代码如下:

//第一步:创建 Promise 对象

const p = new Promise((resolve,reject) => {

//生成一个随机数 [0,2]

const num = Math.random*2

console.log(“哈哈哈,你知道我什么时候执行吗”)

//使用定时模仿异步操作

setTimeout(function(){

if(num < 1){

//调用 resolve

resolve(“sucess”)

}else{

//调用 reject

reject(“fail”)

}

},1000)

})

console.log(“程序结束了”)

// then 匿名函数对应着 resolve回调;catch 匿名函数对应着 reject回调

p.then((value) => {

console.log(value)

}).catch((err) => {

console.log(err)

})

运行结果:

看到结果,聪明的同学应该知道我想表达什么了,也就是说  Promise 是 异步编程 的一种解决方法,他自身不是异步的,所以,才有上面的结果,而 setTimeout() 这里相当于是一个异步操作,所以,后执行,并且,resolve() 和reject() 回调也是等同步操作执行完之后再调用

更多用法

一、多 then 连用(串行执行

经过上面简单的实例,相信大家对 Promise 的作用和基本使用已无大的障碍。下面,我再给大伙讲讲他的其他用法。

比如,有若干个异步任务,需要先做任务1,如果成功后再做任务2,任何任务失败则不再继续并执行错误处理函数。

要串行执行这样的异步任务,不用Promise需要写一层一层的嵌套代码。有了Promise,我们只需要简单地写:

job1.then(job2).then(job3).catch(handleError);

其中,job1job2job3都是Promise对象。

为了让大家更清晰的理解多 then 连用,我就没写异步操作:

//第一步:创建多个 Promise 对象

const job1 = new Promise((resolve,reject) => {

console.log(“程序开始了”)

resolve(“起床”)

})

const job2 = new Promise((resolve,reject) => {

resolve(“穿衣服”)

})

const job3 = new Promise((resolve,reject) => {

resolve(“洗脸”)

})

// then 匿名函数对应着 resolve回调;catch 匿名函数对应着 reject回调

job1.then((value) => {

console.log(value)

return job2

}).then((value) => {

console.log(value)

return job3

}).then((value) => {

console.log(value)

}).catch((err) => {

console.log(“err”,err)

})

console.log(“程序结束了”)

运行结果:

简单分析:

  • 一个 then 对应处理一个 Promise

  • “并且,resolve() 和reject() 回调也是等同步操作执行完之后再调用”,这句话希望大家能对着运行结果 和 代码好好理解一下。

  • 执行 catch 就是 job1job2job3 中任意一个 Promise 调用了 reject()。案例如下

二、all的使用(并行执行

//第一步:创建多个 Promise 对象

const job1 = new Promise((resolve,reject) => {

console.log(“程序开始了”)

resolve(“起床”)

})

const job2 = new Promise((resolve,reject) => {

//由于这个 导致进入

resolve(“穿衣服”)

})

const job3 = new Promise((resolve,reject) => {

resolve(“洗脸”)

})

// 同时执行job1、job2、job3,并在它们都完成后执行then:

Promise.all([job1,job2,job3]).then(value => {

console.log(value) // 获得一个Array: [‘job1’, ‘job2’,‘job3’]

})

console.log(“程序结束了”)

执行结果:

三、race()的使用

//第一步:创建多个 Promise 对象

const job1 = new Promise((resolve,reject) => {

console.log(“程序开始了”)

resolve(“起床”)

})

const job2 = new Promise((resolve,reject) => {

//由于这个 导致进入

resolve(“穿衣服”)

})

const job3 = new Promise((resolve,reject) => {

resolve(“洗脸”)

})

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论

打赏作者

普通网友

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值