Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。
Promise对象有以下两个特点
(1)对象的状态不受外界影响。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。
resolved 成功
rejected 失败
let fs = require("fs")
// fs.readFile("./1.txt", function(err,data){
//
// let str1 = data.toString()
//
// fs.readFile("./2.txt", function(err, data){
//
// let str2 = data.toString()
// console.log(str1 + str2)
//
// })
// })
// promise 异步任务对象,用于将一个异步任务封装成一个对象
// promise 对象必须使用构造函数创建,构造函数参数是一个函数,函数参数就是resolve,reject两个参数
//
const p1 = new Promise(function(resolve, reject){
fs.readFile("./1.txt", function(err, data){
if (err){
// 当异步任务执行失败时,调用reject,调用reject,promise对象就会变为失败状态,将错误对象传入reject
reject(err)
}else{
// 当异步任务执行成功时时,调用resolve,调用resolve,promise对象就会变为成功状态,可以成功信息传入
resolve(data)
}
})
})
// promise对象.then() 用于为promise对象添加处理函数
// 1.如果promise对象处于待定状状态,处理函数会在promise对象进入成功状态的那一刻执行
// 2.如果promise对象已经处于成功状态,处理函数会立即执行
// 处理函数中有一个参数,参数就是在promise中执行resolve时传递过来的对象
// p1.then(function(data){
//
// console.log(data.toString())
// })
// promise对象.catch() 用于为promise添加处理函数
// 如果promise对象处于待定状态,处理函数会在promise对象进入失败状态的那一刻执行
// 如果promise对象已经处于失败状态,处理函数会立即执行
// 处理函数中有一个参数,参数就是在promise中执行reject时传递过来的错误对象
// p1.catch(function(err){
//
// console.log(err)
// })
const p2 = new Promise(function(resolve,reject){
fs.readFile("./2.txt", function(err, data){
if (err){
reject(err)
}else{
resolve(data)
}
})
})
// Promise.all()方法,用于将多个promise对象合并为一个总的promise,参与合并的promise都处于成功状态时,总promise才会进入成功状态
const p3 = Promise.all([p1,p2])
p3.then(function(data){
// 参数data是一个数组,数组中分别存放参数合并每个promise.resolve传递的值
let s = ""
data.forEach(el=>{
s += el.toString()
})
console.log(s)
})
p3.catch(function(err){
console.log(err)
})
// 可以在任何时候通过.then()或.catch() 获取promise状态,执行处理函数
// p3.then(data=>{
// console.log(data)
// })
// 异步任务函数可以直接返回一个promise对象
function readMyFile(filePath){
return new Promise(function(resolve,reject){
fs.readFile(filePath, function(err, data){
if (err){
reject(err)
}else{
resolve(data)
}
})
})
}
// readMyFile("./3.txt").then(data=>{
// console.log(data.toString())
// }).catch(err=>{
// console.log(err)
// })
Promise.all([readMyFile("./1.txt"),readMyFile("./2.txt"),readMyFile("./3.txt")])
.then(data=>{
console.log(data)
})
.catch(err=>{
console.log(err)
})
html 中 script代码
let btn = document.getElementById("btn")
// setTimeout(()=>{
// console.log("歌曲下载完成")
// }, 3000)
//
// btn.onclick = function(){
//
// console.log("播放")
// }
const p1 = new Promise((resolve, reject)=>{
setTimeout(()=>{
console.log("歌曲下载完成!")
resolve()
}, 3000)
})
// 串行的异步任务
btn.onclick = function(){
// 第一个任务的promise对象
p1.then(()=>{
// 返回一个新的promise对象
return new Promise((resolve, reject)=>{
setTimeout(()=>{
console.log("歌曲解压转码完成!")
resolve()
}, 3000)
})
})
.then(data=>{
// 监听p1.then()函数执行后返回的新的promise对象的成功状态
console.log("播放")
})
}
// 使用多个异步任务顺序执行,使用promise.then()中返回的新的promise对象,可以避免多重嵌套