Promise是JS中进行异步编程的新解决方案。
从语法上来说:Promise是一个构造函数
从功能上来说:promise对象用来封装一个异步操作并可以获取其成功/失败的结果值
promise:启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
promise支持链式调用,可以解决回调地狱问题
回调地狱:回调函数嵌套使用,外部回调函数异步执行的结果是嵌套的回调执行的条件。不便于阅读,不便于异常处理。
Promise是什么?
1.1理解
1.抽象表达:
1)Promise是一门新的技术(ES6规范)
2)Promise是JS中进行异步编程的新解决方案
备注:旧方案是单纯使用回调函数
2.具体表达:
1)从语法上来说:Promise是一个构造函数
2)从功能上来说:Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值
异步编程:
*fs文件操作
```
require('fs').readFile('./index.html',(err,data))=>{})
```
*数据库操作
*AJAX
```
$.get('/server', (data)=>{})
```
*定时器
```
setTimeout(()=>{}, 2000);
```
2为什么要用Promise?
2.1 指定回调函数的方式更加灵活
1.旧的:必须在启动异步任务前指定
2.promise:启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
2.2 支持链式调用,可以解决回调地狱问题
1.什么是回调地狱?
回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调执行的条件。
2.回调地狱的缺点?
不方便阅读不便于异常处理
3.解决方案?
Promise链式调用
案例👇 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise初体验</title>
<style>
#btn{
border: none;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<h2 class="page-header">Promise的第一个文档</h2>
<button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
</body>
<script>
//生成随机数
function getSuiji(a, b) {
return Math.floor(Math.random() * (b - a + 1)) + a;
}
//点击按钮,2s后显示是否中奖(30%概率中奖)
//若中奖弹出 恭喜恭喜 ,奖品为10万RMB
//若未中奖弹出 再接再厉
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// setTimeout(() => {
// //30% 1-100 1 2 30
// //获取从1-100的一个随机数
// var n = getSuiji(1,100);
// if(n <= 30){
// console.log(n);
// alert('恭喜恭喜')
// }else{
// console.log(n);
// alert('拜拜嘞')
// }
// },1000);
// });
//Promise 形式实现
//resolve 解决 函数类型的数据
//reject 拒绝 函数类型的数据
const p = new Promise((resolve, reject) => {
setTimeout(() => {
var n = getSuiji(1,100);
if(n <= 30){
resolve(n);//将promise对象的状态设置为成功
}else{
reject(n);//将promise对象的状态设置为失败
}
},1000);
});
//调用then方法
p.then((n) => {
alert('恭喜恭喜,您的中奖数字为:' + n);
},(n) => {
alert('拜拜嘞,你的号码是:' + n);
});
});
</script>
</html>
Promise-fs读取文件下
//
const fs = require('fs');
//回调函数 形式
// fs.readFile('Promise初体验.html', (err, data) => {
// //如果出错,则抛出错误
// if (err) throw err;
// //输出文件内容
// console.log(data.toString());
// });
//Promise 形式
let p = new Promise((resolve, reject) => {
fs.readFile('Promise理解和使用.txt', (err, data) => {
//如果出错
if (err) reject(err);
//如果成功
resolve(data);
});
});
//调用 then
p.then(value => {
console.log(value.toString());
}, reason => {
console.log(reason);
})