Promise学习
网络请求中的回调地狱
请求之中套请求
定时器的异步事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1. 使用setTimeOut
// setTimeout(() => {
// console.log('Hello');
// }, 1000);
// 参数->函数
// resolve, reject本身也是函数
// new Promise((resolve, reject) => {
// setTimeout(() => {
// console.log('Hello');
// console.log('Hello');
// console.log('Hello');
// setTimeout(() => {
// console.log('Hello JS');
// console.log('Hello JS');
// console.log('Hello JS');
// setTimeout(() => {
// console.log('Hello python');
// console.log('Hello python');
// console.log('Hello python');
// }, 1000);
// }, 1000);
// }, 1000);
// })
new Promise((resolve, reject) => {
// 第一次网络请求的代码
setTimeout(() => {
resolve();
})
}).then(() => {
// 针对第一次网络请求结果处理的代码
console.log('Hello');
console.log('Hello');
console.log('Hello');
return new Promise((resolve, reject) => {
// 第二次网络请求的代码
setTimeout(() => {
resolve();
})
})
}).then(() => {
// 针对第二次网络请求结果处理的代码
console.log('Hello JS');
console.log('Hello JS');
console.log('Hello JS');
return new Promise((resolve, reject) => {
// 第三次网络请求的代码
setTimeout(() => {
resolve();
})
})
}).then(() => {
// 针对第三次网络请求结果处理的代码
console.log('Hello python');
console.log('Hello python');
console.log('Hello python');
});
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello World');
reject('error message');
}, 2000);
}).then((data) => {
console.log(data);
}).catch(err => {
console.log(err);
})
</script>
</body>
</html>
Promise的三种状态
- pending: 等待状态，比如正在进行网络请求，或者定时器没有到时间
- fulfill: 满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
- reject: 拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()
Promise的另外一种写法
<script>
new Promise((resolve, reject) => {
setTimeout(() => {
}, 1000)
}).then(function(data) {
}, function(err) {
})
</script>
Promise的链式调用
优雅的处理异步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 网络请求：aaa -> 自己处理(10行)
// 处理: aaa 111 -> 自己处理(10行)
// 处理 aaa 111 222 -> 自己处理
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa');
}, 1000);
}).then(res => {
console.log(res, '第一层的十行处理代码');
// 对结果进行第一次处理
return new Promise((resolve, reject) => {
resolve(res + '111');
});
}).then(res => {
console.log(res, '第二层的十行处理代码');
return new Promise(resolve => {
resolve(res + '222');
})
}).then(res => {
console.log(res, '第三层的十行代码处理');
})
// 简洁写法
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa');
}, 1000);
}).then(res => {
console.log(res, '第一层的十行处理代码');
// 对结果进行第一次处理
return Promise.resolve(res + '111');
}).then(res => {
console.log(res, '第二层的十行处理代码');
return Promise.resolve(res + '222');
}).then(res => {
console.log(res, '第三层的十行代码处理');
})
// 再简洁写法
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('aaa');
}, 1000);
}).then(res => {
console.log(res, '第一层的十行处理代码');
// 对结果进行第一次处理
return res + '111';
}).then(res => {
console.log(res, '第二层的十行处理代码');
return res + '222';
}).then(res => {
console.log(res, '第三层的十行代码处理');
}).catch(err => {
console.log(err);
})
</script>
</body>
</html>
Promise的all方法
当所有的请求都返回的时候再进行数据的处理
Promise.all([请求1， 请求2]).then(results => {
results[0],
results[1]
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const request1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('request1 data');
}, 2000);
})
const request2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('request2 data');
}, 1000)
})
Promise.all([request1, request2]).then(results => {
console.log(results[0]);
console.log(results[1]);
})
</script>
</body>
</html>
