Promise 是什么？
抽象表达：
1、Promise 是一门新的技术（ES6规范）
2、Promise 是JS中进行异步编程的新解决方案
备注：旧方案是单纯使用回调函数
具体表达：
1、从语法上来说：Promise 是一个构造函数
2、从功能上来说：promise对象用来封装一个异步操作并可以获取其成功/失败的结果值
异步编程
1、fs 文件操作
require('fs').readFile('./index.html',(err,data)=>{
})
2、数据库操作
3、AJAX 网络请求
$.get('/server',(data){
})
4、定时器 （setTimeout）
Promise指定回调函数的方式更加灵活
1、旧的：必须在启动异步任务前指定
2、promise：启动异步任务=>返回promise对象=>给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）
Promise支持链式调用，可以解决回调地狱问题
1、什么是回调地狱？
回调函数嵌套使用，外部回调函数异步执行的结果是嵌套的回调执行的条件
2、回调地狱的特点？
不便于阅读
不便于异常处理
3、解决方案？
promise链式调用
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>
</head>
<body>
<div class="container">
<h2 class="page-header">Promise 初体验</h2>
<button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
<script>
//生成随机数
function rand(m, n) {
return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
}
//点击按钮 两秒后显示是否中奖（30概率中）
//获取元素对象
const btn = document.querySelector('#btn')
//绑定单击事件
btn.addEventListener('click', function () {
//获取1-100的一个随机数
setTimeout(() => {
let n = rand(1, 100)
if (n <= 30) {
alert('中奖了')
} else {
alert('再接再厉')
}
}, 1000)
})
</script>
</body>
</html>
通过回调函数设置定时器 达到延迟一秒钟后弹出弹窗
通过Promise的方式：
注意：
resolve 解决 函数类型的数据
reject 拒绝 函数类型的数据
这是promise构造函数中函数参数的两个参数，它们都是函数类型的数据
当异步任务调用成功时触发resolve函数，当异步任务调用失败时触发reject函数
resolve函数调用之后会将 promise对象的状态设置为成功
then方法：用来指定回调
它有两个参数，分别时两个回调函数
如果异步请求成功就会调用第一个回调函数 反之则执行第二个回调函数
<!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>
</head>
<body>
<div class="container">
<h2 class="page-header">Promise 初体验</h2>
<button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
<script>
//生成随机数
function rand(m, n) {
return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
}
//点击按钮 两秒后显示是否中奖（30概率中）
//获取元素对象
const btn = document.querySelector('#btn')
//绑定单击事件
btn.addEventListener('click', function () {
//promise实现
//resolve 解决 函数类型的数据
//reject 拒绝 函数类型的数据
const p = new Promise((resolve, reject) => {
//获取1-100的一个随机数
setTimeout(() => {
let n = rand(1, 100)
if (n <= 30) {
resolve(); //将promise 对象的状态设置为成功
} else {
reject()
}
}, 1000)
})
//调用then方法
p.then(() => {
alert('1212')
},
() => {
alert('1313')
})
})
</script>
</body>
</html>
重点：
promise对象的参数是一个回调类型的参数，它有两个参数，这两个参数也是回调函数，promise对象通过then（）方法来指定成功或失败的回调函数
resolve和reject函数可以通过传递参数的形式把，需要的数据传递到then处理函数中去：
const p = new Promise((resolve, reject) => {
//获取1-100的一个随机数
setTimeout(() => {
let n = rand(1, 100)
if (n <= 30) {
resolve(n); //将promise 对象的状态设置为成功
} else {
reject(n)
}
}, 1000)
})
//调用then方法
p.then((value) => {
alert('中奖了 数字为：' + value)
},
(value) => {
alert('失败了 数字为：' + value)
})
})
then方法通过内部回调函数中的参数来接收这个数据
Promise实践练习-fs模块
回调函数的形式：
const fs = require('fs')
fs.readFile('文件路径',(err,data)=>{
//如果出错则抛出错误
if(err) throw err
//输出文件内容
console.log(data)
})
promise的形式：
//Promise的形式
let p = new Promise((resolve, reject) => {
fs.readFile('文件路径', (err, data) => {
//如果出错则抛出错误
if (err) reject(err)
//输出文件内容
resolve(data)
})
})
p.then((value)=>{
console.log('value')
},
(reason)=>{
console.log(reason)
})
Promise实践练习–AJAX操作
AJAX传统方式：
<div class="container">
<h2 class="page-header">Promise 封装 AJAX操作</h2>
<button class="btn btn-primary" id="btn">点击发送ajax</button>
</div>
<script>
//接口地址：https://api.apiopen.top/getJoke
const btn = document.querySelector('#btn')
btn.onclick = function () {
const xhr = new XMLHttpRequest()
xhr.open('GET', 'https://api.apiopen.top/getJoke')
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response)
} else {
console.log(xhr.status)
}
}
}
}
</script>
使用Promise的方式：
<div class="container">
<h2 class="page-header">Promise 封装 AJAX操作</h2>
<button class="btn btn-primary" id="btn">点击发送ajax</button>
</div>
<script>
//接口地址：https://api.apiopen.top/getJoke
const btn = document.querySelector('#btn')
btn.onclick = function () {
const p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('GET', 'https://api.apiopen.top/getJoke')
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response)
} else {
reject(xhr.status)
}
}
}
})
p.then((value) => { console.log(value) }, (reason) => { console.log(reason) })
}
</script>
Promise封装fs模块
function mineReadFile(path) {
return new Promise((resolve, reject) => {
//读取文件
require('fs').readFile(path, (err, data) => {
//判断
if (err) { reject(err) }
//成功
resolve(data)
})
})
}
当封装完这个功能下次读文件的时候就可以使用这个功能：
mineReadFile('文件路径')
.then(value => {
console.log(value)
}, reason => {
console.log(reason)
})
util.promisify方法进行response风格转化
//引入
const util = require('util')
const fs = require('fs')
let mineReadFile = util.promisify(fs.readFile)
mineReadFile('文件路径'.then(value=>{
console.log(value)
}))
Promise封装AJAX请求
function sendAJAX(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response)
} else {
reject(xhr.status)
}
}
}
})
}
使用时：
sendAJAX('url')
.then(value => {
console.log(value)
}, reason => {
console.log(reason)
})
![[一篇读懂]C语言十一讲：单链表的删除和单链表真题实战](https://img-blog.csdnimg.cn/9316603659cc4974993d65ce035aa358.png#pic_center)