ES6 Promise详解

Promise是JS中进行异步编程的新解决方案。从语法上来说：Promise是一个构造函数从功能上来说：promise对象用来封装一个异步操作并可以获取其成功/失败的结果值promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）promise支持链式调用，可以解决回调地狱问题回调地狱：回调函数嵌套使用，外部

慢谷

7735人浏览 · 2022-05-20 10:03:17

慢谷 · 2022-05-20 10:03:17 发布

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);
})