前言
前一篇文章介绍的是Ajax与后端的异步通信,其中涉及到了 Promise 异步编程的用法,想通过这一篇文章简单的介绍一下,如果存在不足或者遗漏之处,欢迎大家评论讨论哦 @_@
1、Promise 是什么?
1、 Promise 是用于解决异步编程的问题;
2、从语法上讲,是一个对象;
3、从功能上小网虫理解为:Promise 就是一个承诺,为未来将要发生的事情做出的一个承诺,他的一个特点:言出必行、不可反悔;
2、Promise 能干什么?
1、解决回调地狱问题;
2、支持并发请求;
回调地狱代码演示:
// 读取文件
const fs = require("fs")
/*
* 模拟场景:
* t1文件读取成功后再读t2文件 -- 回调写法
*/
// t1 读取
fs.readFile("./t1.txt", "utf-8", (err, doc) => {
if (err) {
console.log("失败", err)
} else {
console.log("成功:", doc)
// 成功后读取t2
fs.readFile("./t2.txt", "utf-8", (err, doc) => {
if (err) {
console.log("失败", err)
} else {
console.log("成功:", doc)
// 成功后读取
fs.readFile("./t3.txt", "utf-8", (err, doc) => {
if (err) {
console.log("失败", err)
} else {
console.log("成功:", doc)
// 此处还有 t4、t5等……
}
})
}
})
}
})
3、Promise 的三种状态
Peding
: 对象创建成功后的初始状态 – 还没有决定的一个状态
Fulfilled / Resolved
:当判断事件为成功后的状态 – 成功的状态
Rejected
:当判断事件为失败后的状态 – 失败的状态
注意: 一旦 peding 转为 Fulfilled,就不能再改变状态了,同样 Peding 转为 Rjected 也不能再改变为 Fulfilled 状态。
4、语法
Promise方法 :
Promise():
函数封装,将异步代码封装进去
reslove():
该方法的调用会返回一个成功状态的Promise对象,并可以将成功的结果作为参数传递出去;
reject():
该方法的调用会返回一个失败状态的Promise对象, 并可以将失败的结果作为参数传递出去;
Promise 的 .then() & .catch() 方法 :
.then(value):
捕获Promise 对象执行结束后,返回状态为成功的值,下方代码通过value
去接收的值,该参数名可自定义;
.catch(reason):
捕获Promise 对象执行结束后,产生了状态为失败的值(捕获 Promise 对象返回的错误),下方代码通过reason
接收的返回值,同样,该参数名可自定义;
代码粗略演示:
new Promise(function(resolve, reject){ // 执行逻辑 // 只能选择 resolve 或者 reject 执行 二者只能执行其中之一 resolve(0) }) .then((value) => { // 执行 Promise 中 resolve 传递的值 console.log("我是 Promise 成功状态返回的值:", resolve) }) .catch((reason) => { // 执行 Promise 中 reject 传递的值 consol.log("我是 Promise 失败状态返回的值", reject) }) // 打印结果:我是 Promise 成功状态返回的值:0
5、Promise 的两个小方法
Promise.all()
:
1、接收一个数组为参数,数组中的元素是 Promise 对象;
2、该方法会等到数组中所有的 Promise 对象都执行结束后,再返回一个Promise状态;
3、如果数组中所有的元素都是成功状态的时候,返回一个成功状态的值;
4、如果数组中有一个元素返回的是失败状态则该方法会返回一个失败的状态值。
小结:数组中,最后执行完的Promise 对象所花费的时间,,决定了总的时间;
Promise.rece()
:
1、接收一个数组为参数,数组中的元素都是是 Promise 对象;
2、数组中的顺序是按照 最先执行完的顺序排序,即跑得最快的先输出;
代码演示:
// 读取文件
const fs = require("fs")
const t1 = read("./t1.txt")
const t2 = read("./t2.txt")
function read(txt) {
return new Promise((resolve, reject) => {
fs.readFile(txt, "utf-8", (err, doc) => {
if (err) {
reject(err)
} else {
resolve(doc)
}
})
})
}
// 两个同时输出
Promise.all([t1, t2])
.then((res) => {
console.log("成功:", res)
})
.catch((err) => {
console.log("失败:", err)
})
// 谁的效率更高
Promise.race([t1, t2])
.then((res) => {
console.log("成功:", res)
})
.catch((err) => {
console.log("失败:", err)
})
结果展示:
6、async/await
注意:
await必须在async函数内使用
语法:async function 函数名(){ await Promise // 执行到 await 时,await 会阻塞后面的代码,必须等到此时 await 右边的代码执行结束才会向下执行 }
错误捕获:
try{ // 要执行的代码 }catch(err){ // 错误处理 }
async / await 实现依次输出结果,代码演示:
// 读取文件
const fs = require("fs")
const t1 = read("./t1.txt")
const t2 = read("./t2.txt")
function read(txt) {
return new Promise((resolve, reject) => {
fs.readFile(txt, "utf-8", (err, doc) => {
if (err) {
reject(err)
} else {
resolve(doc)
}
})
})
}
// 依次输出 t1 和 t2 的内容
async function run() {
try {
let t1 = await read("./t1.txt")
let t2 = await read("./t2.txt")
console.log("t1:", t1)
console.log("t2:", t2)
} catch (err) {
console.log("捕获错误:", err)
}
}
run()
效果展示:
下面来一个更加能够体现出 await 功能的代码:
function s(n, t) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(n)
}, t)
})
}
// 现在情况是时间累加
async function ss() {
let r1 = await s(1, 2000)
let r2 = await s(2, 1000)
console.log("r1:", r1)
console.log("r2:", r2)
}
ss()
效果演示:
由上方的动图可以看出,ss() 函数执行结束是等两个 s() 方法调用结束后,才宣布的结束。可以帮助我们实现当某一种事件达成后在去执行某一特定的事件;
async / await 实现同时输出结果,代码演示如下:
function s(n, t) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(n)
}, t)
})
}
async function sss() {
let result = await Promise.all([s(1, 2000), s(2, 1000)])
console.log(result)
}
sss()
效果展示:
主要实现的方法通过上面的代码就可以看出,是通过Promise 对象中的 all() 方法;
相关文章