Promise
Promise表示一个异步操作的最终结果,与之交互的方式主要有then方法,该方法主要注册了两个回调函数,用于接受Promise的最终结果和不能执行的原因
Promise三种状态:
- pending 待定状态 默认值
- fulfilled 成功状态:表示兑现承诺
- rejected 失败状态:拒绝兑现承诺
- 注意:状态一旦一旦改变,就会凝固,不能随意更改
结果值:
- 如果调用的是resolve(),通过then中第一个回调函数获取
- 如果调用的是reject(),通过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>Document</title>
</head>
<body>
<script>
const p=new Promise((resolve,reject)=>{
resolve('执行成功')
// reject('执行失败')
})
p.then(value=>{
console.log(value);
},error=>{
console.log(error);
})
</script>
</body>
</html>
then返回值:
返回值是一个新的Promise对象,对象的结果取决与then函数中的return返回值
注意:上一个then中return返回值,由下一个then中获取
Promise语法-读取文件
//导入fs
import fs from 'fs'
const p = new Promise((resolve,reject)=>{
fs.readFile('文件的路径','utf-8',(err,results)=>{
if(err){
reject(err.message)
}else{
resolve(results)
}
})
})
p.then(value=>{
console.log(`${value}`)
},error=>{
console.log(`${error}`)
})
基于Promise封装一个读取文件的函数
import fs from 'fs'
function read(url){
return new Promise((resolve,reject)=>{
fs.readFile(url,'utf-8',(err,results)=>{
if(err){
reject(err.message)
}else{
resolve(results)
}
})
})
}
read('文件路径').then(value=>{
console.log('你好'+value)
})
read('文件路径').then(value=>{
console.log('你真好'+value)
})
Promise语法-封装ajax
<!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>Document</title>
</head>
<body>
<script>
const p = new Promise((resolve,reject)=>{
const xhr=new XMLHttpRequest()
xhr.open('get','http://www.liulongbin.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===0){
resolve(JSON.parse(xhr.responseText))
}else{
reject('请求失败')
}
}
}
})
p.then(value=>{
console.log(value)
},error=>{
console.log(error)
})
</script>
</body>
</html>
基于Promise封装一个ajax请求
<!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>Document</title>
</head>
<body>
<script src='"https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"'>
<script>
function myAjax(url,date={},method='get'){
return new Promise((resolve,reject)=>{
//执行异步操作
$.ajax({
method,
url,
data,
success:function(res){
resolve(res)
},
error:function(err){
reject(err)
}
})
})
}
myAjax('http://www.liulongbin.top:3006/api/getbooks').then((value)=>{
console.log(value)
})
myAjax( "http://www.liulongbin.top:3006/api/addbook",{bookname:'xxx',author:'xxx',publish:'xxx'},
'post').then(value=>{
console.log(value)
})
</script>
</script>
</body>
</html>
Promise语法-封装定时器
const p = new Promise((resolve,reject)=>{
setTimeout(function(){
const num=Math.random()
conlose.log(num)
if(num>=0.5){
resolve('异步执行成功')
}else{
reject('异步执行失败')
}
},1000)
})
p.then(value=>{
console.log(value)
},error=>{
conlose.log(error)
})
使用Promise解决回调地狱
import fs from 'fs'
function read(url){
return new Promise((resolve,reject)=>{
fs.readFile(url,'utf-8',(err,results)=>{
if(err){
reject(err.message)
}else{
resolve(results)
}
})
})
}
read('文件路径').then(value=>{
console.log(value)
return read('文件路径2')
})
.then(value=>{
console.log(value)
return read('文件路径3')
})
.then(value=>{
console.log(value)
})
Promise.cath()方法:
作用: 在Promise原型对象上面,指定失败的回调函数
//导入fs
import fs from 'fs'
function read(url){
return new Promise((resolve,reject)=>{
fs.readFile(url,'utf-8',(err,results)=>{{
if(err){
reject(err.message)
}else{
resolve(results)
}
})
})
}
read('文件的路径').then(value=>{
console.log(value)
}).carch(error=>{
console.log(error)
})
Promise.all()方法
作用:用于将多个 Promise 实例,包装成一个新的 Promise 实例。
import fs from 'fs'
function read(url){
return new Promise((resolve,reject)=>{
fs.readFile(url,'utf-8',(err,results)=>{
if(err){
reject(err.message)
}else{
resolve(results)
}
})
})
}
const p1=read('文件路径1')
const p2=read('文件路径2')
const p3=read('文件路径3')
Promise.all([p1,p2,p3]).then(valueArr=>{
console.log(valueArr)
})
Promise.race()方法
作用:同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
import fs from 'fs'
function read(url){
return new Promise((resolve,reject)=>{
fs.readFile(url,'utf-8',(err,results)=>{
if(err){
reject(err.message)
}else{
resolve(results)
}
})
})
}
const p1=read('./files/1.txt')
const p2=read('./files/2.txt')
const p3=read('./files/3.txt')
Promise.race([p1,p2,p3]).then(value=>{
console.log(value);
})