Promise的概念

1,Promise是一个构造函数,我们可以通过new Peomise()得到一个Promise的实例,这个实例是一个具体的异步操作,异步操作的结果只能有两种状态。

异步执行成功:需要在内部调用成功的回调函数resolve把结果返回给调用者。

异步执行失败:需要在内部调用失败的回调函数reject把结果返回给调用者。

2,Promise构造函数的prototype属性上有一个.then方法,也就是说,只要Promise构造函数创建的实例,都可以访问到这个.then方法,该方法可以指定成功(resolve)和失败(reject)回调函数。(由于Promise的实例是一个异步操作,所以内部拿到操作结果后,无法使用return把操作的结果返回给调用者,这个时候只能使用回调函数(resolve,reject)的形式来把成功或失败的结果返回给调用者)

3,案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 let a = new Promise((resolve, reject) => {
var num = Math.ceil(Math.random() * 10);
if (num > 100) {
resolve("成功");
} else {
reject("失败,小于100");
}
})
.then((res) => {
console.log(res);//成功
})
.catch((res) => {
console.log(res);//失败,小于100
});
//resolve()成功后的回调,可以将值传到.then()
//reject()成功后的回调,可以将值传到.catch()
//那么怎么用promise将接口按照顺序执行呢?无线嵌套.then()即可,这样能解决问题,但是麻烦,所以async/await就出来了,可以解决回调地狱的问题。

4,注意

promise本身是同步的

1
2
3
4
5
let oP = new Promise( (res, rej) => {
console.log(1);
});
console.log(2);
//输出 1 2

promise的回调then是异步的

1
2
3
4
5
6
7
8
9
let oP = new Promise((res, rej) => {
console.log(1);
res(3)
});
oP.then((res) => {
console.log(res);
});
console.log(2);
//输出 1 2 3

async/await

1,async/await是写异步代码的新方式,之前的方法有回调函数和Promise。

2,async/await是基于Promise实现的,他不能用于普通的回调函数。

3,async/await与Promise一样,是非阻塞的。(阻塞调用:是指调用结果返回之前,当前线程会被挂起。一直处于等待消息通知,不能执行其他业务,调用线程只有在得到结果之后才能返回。非阻塞调用:是指不能立刻得到结果之前,该调用不会阻塞当前线程,而会立刻返回。)

4,async/await使得异步代码看起来像同步代码。

5,案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 // async await
async testBtn() {
await this.btnA();
await this.btnB();
},
btnA() {
console.log("a");
},
btnB() {
console.log("b");
},
输出 a, b
// async await
async testBtn() {
await this.btnB();
await this.btnA();
},
btnA() {
console.log("a");
},
btnB() {
console.log("b");
},
//输出 b, a
通过async await可以轻松的控制接口的执行顺序。