Promise 介绍与基本使用

Promise 介绍与基本使用 - 学习笔记

1、Promise 介绍与基本使用
- - Promise是什么？
  - - 理解：
    - 为什么要用 Promise
    - `Promise` 的初体验 - 抽奖
    - `Promise` 初体验 - 文件读取（返回 Promise 对象）
2、Promise 的状态
3、Promise 对象的值
3、Promise 关键问题
4、Promise 自定义封装
5、async 与 await

1、Promise 介绍与基本使用

Promise是什么？

理解：

1、抽象表达：
- 1、Promise是一门新的技术（ES6规范）
- 2、Promise是 JS 中进行异步编程的新解决方案
备注：旧方案是单纯使用回调函数
具体表达：
- 1、从语法上来说：Promise是一个构造函数
- 2、从功能上来说：Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

为什么要用 Promise

1、指定回调函数的方式更加灵活
- 1、旧的：必须在启动异步任务前指定
- 2、Promise：启动异步任务 => 返回 Promise 对象 => 给 Promise 对象绑定回调函数（甚至可以在异步任务结束后指定/多个）
2、支持链式调用，可以解决回调地狱问题
- 1、什么是回调地狱？
  - 回调函数嵌套调佣，外部回调函数异步执行的结果是嵌套的回调执行的条件
- 2、回调地狱的缺点？
  - 不便于阅读
  - 不便于异常处理
- 3、解决方案？
  - Promise 链式调用

`Promise` 的初体验 - 抽奖

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"></head><body><div class="container"><h2 class="page-head">Promise 初体验</h2><button type="button" class="btn btn-primary" id="btn">点击抽奖</button></div><script>const btn = document.getElementById('btn')btn.addEventListener('click', function () {// Promise 形式实现const p = new Promise((resole, reject) => {// resole：解决，函数类型的参数 - 异步任务成功的时候调用// reject：拒绝，函数类型的参数 - 异步任务失败的时候调用// Promise 可以包裹一个异步任务setTimeout(() => {let n = Math.floor((Math.random() * 100) + 1)if (n <= 30) {// 成功 - 调用 resole   将 Promise 对象（p）的状态设置为 【成功】resole(n)} else {// 失败 - 调用 reject  将 Promise 对象（p）的状态设置为 【失败】reject(n)}}, 1000)})// 处理成功、失败的结果// 调用 .then() 方法，传入两个函数类型的参数.then((res) => {// 成功时候调用alert('恭喜你中奖了，奖品为：一台iphone 12 pro max！您的号码为：' + res)}, (err) => {// 失败时候调用alert('再接再厉！您的号码为：' + err)})})</script></body></html>

`Promise` 初体验 - 文件读取（返回 Promise 对象）

const fs = require('fs')// Promise 实现
function myReadFile(path) {// 翻译个 Promise 对象return new Promise((resolve, reject) => {fs.readFile(path, 'utf-8', (err, data) => {if (err) {reject(err)return}resolve(data)})})
}myReadFile('./test2.txt').then(data => {console.log('成功', data);
}, err => {console.log('失败', err);
})