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最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了

易错点点拨

我想在 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);

其中，job1、job2和job3都是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 就是 job1、job2和job3 中任意一个 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(“洗脸”)

})