Promise

Ly_info

已于 2023-03-15 10:24:20 修改

阅读量78

点赞数

文章标签： javascript 前端 vue.js

于 2023-01-03 21:19:22 首次发布

本文链接：https://blog.csdn.net/Liuyiaixuexi/article/details/128538039

版权

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);
})