- 🚀Promise入门篇
- 1.1 🚩Promise是什么?
- 1.1.1 🚧理解
- 1.2 🏁为什么要用promise?
- 1.3 🏳🌈promise的状态改变
- 1.4 🚂promise的基本流程
- 1.5 🚗promise的基本使用
- 1️⃣使用1:基本编码流程
- 2️⃣使用2:使用 promise 封装 ajax 异步请求
- 3️⃣使用3:使用promise封装读取文件的函数
-
抽象表达:
① Promise是一门新的技术(ES6规范)
② Promise是JS中进行
异步编程
的新解决方案备注:旧方案是单纯使用回调函数
异步编程有
:1、fs文件操作(fs是node.js下的一个模块,可以对磁盘进行读写操作)
required('fs').readFile('./index.html',(err,data)=>{})
2、数据库操作
3、AJAX
$.get('/server',(data)=>{})
4、 定时器
setTimeout(()=>{},2000)
-
具体表达:
① 从语法上来说:Promise是一个
构造函数
② 从功能上来说:Promise对象用来封装一个异步操作
,并可以获取其成功/失败的结果值
-
指定回调函数的方式更加灵活
-
旧的: 必须在启动异步任务前指定
-
promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
-
-
支持链式调用,可以解决回调地狱问题
-
什么是回调地狱?
回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件
-
回调地狱的缺点?
不便于阅读
不便于异常处理
-
解决方案?
promise 链式调用
-
终极解决方案?
async/await
promise的状态是promise实例对象
身上的一个属性(内置属性),属性名为【PromiseState】
PromiseState属性对应的值有以下三个:
- 初始状态为pending(未决定的)
- pending变为resolved/fullfilled(表示成功)
- pending变为rejected(表示失败)
说明:只有这2种,且一个promise对象只能改变一次
状态不能由成功变为失败,或失败变为成功
无论变为成功还是失败,都会有一个结果数据
成功的结果数据一般称为value,失败的结果数据一般称为reason
promise 对象的值:
实例对象中的另一个属性 【PromiseResult】
保存着异步任务【成功/失败】的结果
resolve()和reject()可以对实例对象的值进行修改
1.4 🚂promise的基本流程 1.5 🚗promise的基本使用 1️⃣使用1:基本编码流程需求:
点击按钮,2s后显示是否中奖(30%概率中奖)
若中奖弹出 恭喜恭喜,中100万!
若未中奖弹出 再接再厉
效果:
代码实现:
promise初体验
点击抽奖
// 生成随机数
function rand(m, n) {
return Math.ceil(Math.random() * (n - m + 1)) + m - 1
}
// 获取元素对象
const btn = document.querySelector('#btn')
// 绑定单击事件
btn.addEventListener('click', function () {
// 定时器 回调函数形式
// setTimeout(() => {
// 30% 1-100
// 获取从1-100的一个随机数
// let n = rand(1, 100)
// 判断
// if (n {
// 定时器 在执行器函数中启动异步任务
setTimeout(() => {
// 30% 1-100
// 获取从1-100的一个随机数
let n = rand(1, 100)
// 判断
//根据结果做不同处理,如果成功了, 调用 resolve(), 指定成功的 value, 变为resolved状态
if (n {
// 成功执行第一个回调函数
alert('恭喜恭喜,中100万!您的中奖数字为' + value)
}, (reason) => {
// 失败执行第二个回调函数
alert('再接再厉,您的号码为' + reason)
})
})
2️⃣使用2:使用 promise 封装 ajax 异步请求
promise 封装 AJAX 操作
点击发送 AJAX
const btn = document.querySelector('#btn')
btn.addEventListener('click', function () {
// 1. 创建 promise 对象
const p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:8000/server-promise')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status {
console.log(value)
}, reason => {
console.log(reason)
})
})
3️⃣使用3:使用promise封装读取文件的函数
/*
封装一个函数 mineReadFile 读取文件内容
参数:path 文件路径
返回:promise 对象
*/
function mineReadFile(path) {
return new Promise((resolve, reject) => {
// 读取文件
require('fs').readFile(path, (err, data) => {
// 判断 失败
if (err) reject(err)
// 成功
resolve(data)
})
})
}
mineReadFile('./resource/content.txt')
.then(value => {
// 输出文件内容
console.log(value.toString())
}, reason => {
console.log(reason)
})
不需要手动封装一个函数方法如下:使用node.js中内置的一个方法 promisify,属于util模块
// 引入util模块
const util = require('util')
// 引入fs模块
const fs = require('fs')
// 返回一个新的promise风格的函数
// 向util模块的promisify传一个err风格的函数,会自动帮我们封装好,
// 返回一个新的函数,这个函数是返回promise对象
let mineReadFile = util.promisify(fs.readFile)
mineReadFile('./resource/content.txt').then(value => {
console.log(value.toString())
})
今天的分享就到这里啦 ✨ 下一篇文章讲关于Promise相关API的使用 期待大佬们的来访哦! 点赞🌹收藏💖关注🤞