高阶-Promise异步处理
# 1.同步异步概念
同步：代码从上而下依次执行，后面的代码必须要等待前面的代码执行完成之后才能够执行
异步：需要等待才能执行的代码（定时器，事件触发的函数，ajax请求）,如果执行代码遇到异步代码，先将异步放到一边，先执行后面的同步代码
# 2.ajax异步请求
- 多个ajax 嵌套请求会形成回调地狱
- 后期没有办法维护代码
console.log(1);
//多个ajax 嵌套请求===形成回调地狱
$http.get('data.json',res=>{
if(res.id === 42){
$http.get('data1.json',res1=>{
//处理js
if(res1.code == 0){
$http.get('data2.json',res2=>{
console.log(res2);
})
}
})
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 3.Promise
作用：处理回调地狱的问题
特点：Promise 自己是一个构造函数 实例化出一个对象
# 3.1 最简Promise
//最简Promise
//resolve 成功时的回调函数
//reject 失败时的回调函数
new Promise((resolve,reject)=>{
let index = true
if(index === true){
resolve(100); //成功触发
}
if(index === false){
reject('出错啦'); //失败触发
}
})
//then 接收成功函数的回调
.then(function(res=1){ //成功的回调
console.log(res);
})
//catch 接收失败函数的回调
.catch(function(err =0){ //失败的回调
console.log(err);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 3.2 体会带有异步的Promise
//最简Promise
//resolve 成功时的回调函数
new Promise((resolve,reject)=>{
//异步触发Promise 成功回调
//3秒后触发成功
setTimeout(()=>{
resolve(2000)
},3000)
})
.then(function(res=1){ //成功的回调
console.log(res);
})
.catch(function(err =0){ //失败的回调
console.log(err);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 3.3 体验带有异步请求的Promise
new Promise((resolve,reject)=>{
//发送请求
$http.get('data.json',res=>{
//请求成功
if(res.id == 42){
resolve(res)
}else{
reject('请求失败')
}
})
})
.then((res)=>{
console.log(res)
console.log('请求成功');
})
.catch((err)=>{
console.log('请求失败');
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 3.4 利用Promise 重写 多层ajax 回调
new Promise((resolve,reject)=>{
//发送请求
$http.get('data.json',res=>{
//请求成功
if(res.id == 42){
resolve(res)
}
})
})
.then((res)=>{
console.log('第一层请求成功');
console.log(res);
//第二层请求开始
return new Promise((resolve,reject)=>{
$http.get('data1.json?id='+res.id,res1=>{
if(res1.code ==0){
resolve(res1);
}
})
})
})
.then((res1)=>{
console.log('第二层请求成功');
console.log(res1);
//第三层请求
return new Promise((resolve,reject)=>{
$http.get('data2.json?id=3',res2=>{
if(res2.orderId){
resolve(res2)
}
})
})
})
.then(res2=>{
console.log('第三层请求成功');
console.log(res2);
})
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# 3.5 优化Promise ajax请求
//第一步 提取公共的js代码进行封装
//获取参数
//封装Promise 与ajax
function getData(url,data){
//如果有参数就拼接
if(data){
url +='?'+data;
}
return new Promise((resolve,reject)=>{
//发送请求
$http.get(url,res=>{
//请求成功
if(res.status ===0){
resolve(res)
}
})
})
}
getData('data.json').then((res)=>{
console.log(res);
return getData('data1.json','id='+res.id)
})
.then((res1)=>{
console.log(res1);
return getData('data2.json','id=3')
})
.then(res2=>{
console.log(res2);
})
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
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 第二步 es6语法极致简化
//获取参数
//封装Promise 与ajax
function getData(url,data){
//如果有参数就拼接
if(data){
url +='?'+data;
}
return new Promise((resolve,reject)=>{
//发送请求
$http.get(url,res=>{
//请求成功
if(res.status ===0){
resolve(res)
}
})
})
}
getData('data.json')
.then(res=>getData('data1.json','id='+res.id))
.then(res1=>getData('data2.json','id=3'))
.then(res2=>{
console.log(res2);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 4.axios 插件
作用：ajax封装的插件，三方包
//实现上面的请求
axios('data.json')
.then(res=>axios('data1.json',{params:{id:res.id}}))
.then(res1=>axios('data2.json',{params:{id:3}}))
.then(res2=>{
console.log(res2.data);
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 5.async await
异步问题:异步中某个变量的值重新改变，后面的代码拿不到最新的值
let a = 1;
//先同步后异步
setTimeout(()=>{
a=2;
},0)
console.log(a); //1
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
async await作用：将异步操作变为同步操作
# 5.1 声明异步函数
//async await 语法
//async 声明该函数有异步操作 一般写在函数 function 的前面
//await 等待异步执行完毕，和async连用
//声明异步函数
async function getData(){
}
//表达式声明异步函数
const getData1 = async function(){
}
//Es6 写法 箭头函数
const getData2 = async ()=>{
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 5.2 实现：将异步定时器改为同步
console.log(1);
const timer = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(() => {
console.log(2);
resolve('成功了')
}, 0)
})
}
const num = async () => {
console.log(1.5);
await timer();
console.log(3);
console.log(4);
}
num()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 5.3 完美实现：将异步ajax改为同步
// 1.先把异步代码放到 声明的异步函数中
const getData = async ()=>{
//2.在异步操作的的前面加上await 实现同步化
const res = await axios('data.json');
const res1 = await axios('data1.json',{params:{id:res.id}});
const res2 = await axios('data2.json',{params:{id:3}});
console.log(res2.data);
}
getData();
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
编辑 (opens new window)
上次更新: 2022/05/28, 19:34:46