<!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>
/*
Promise
Promise可以帮助我们解决异步中的回调函数的问题
Promise就是一个用来存储数据的容器
它拥有一套特殊的存取数据的方式
这个方式使得它里面可以存储异步调用的结果
创建Promise
创建promise时,构造函数中需要一个函数作为参数
Promise构造函数的回调函数,它会在创建Promise时调用,调用时会有两个参数传入进去
*/
const promise = new Promise((resolve,reject)=>{
/*
resolve和reject是两个函数,通过这两个函数可以向Promise中存储数据
resolve在执行正常时存储数据,reject在执行错误时存储数据
*/
resolve("嘿嘿嘿");
reject("哈哈哈");
/*
通过函数来向Promise中添加数据,好处就是可以用来添加异步调用的数据
*/
console.log("回调函数已经执行!");
setTimeout(()=>{
resolve("嘿嘿嘿");
},2000)
throw new Error("哈哈哈,出错了");
resolve("resolve返回的数据");
reject("reject返回的从数据");
})
setTimeout(() => {
console.log("哈哈哈");
},3000)
console.log(promise);
/*
从Promise中读取数据
-可以通过Promise的实例方法then来读取Promise中存储的数据
-then需要两个回调函数作为参数,回调函数用来获取promise中的数据
通过resolve存储的数据,会调用第一个函数返回
可以在第一个函数中编写处理数据的代码
通过reject存储的数据或者出现异常时,会调用第二个函数返回
可以在第二个函数中编写处理异常的代码
*/
promise.then((result) => {
console.log("1-promise中的数据",result);
},(reason) => {
console.log("2-数据",reason);
})
/*
Promise中维护了两个隐藏属性:
PromiseResult
-用来存储数据
PromiseState
-记录Promise的状态(三种状态)
pending(进行中)
fulfilled(完成) 通过resolve存储数据时
rejected(拒绝,出错了) 出错或者通过reject存储数据时
-state只能修改一次,修改以后永远不会在变
流程:
当Promise创建时,PromiseState初始化值为pending(进行中)
当通过resolve存储数据时,PromiseState变为fulfilled(完成)
PromiseResult变为存储的数据
当通过reject存储数据时,PromiseState变为rejected(拒绝,出错了)
PromiseResult变为存储的数据 或 异常对象
当我们通过then读取数据时,相当于为Promise设置了回调函数
如果PromiseState变为fulfilled,则调用then的第一个回调函数来返回
如果PromiseState变为rejected,则调用then的第二个函数来返回
*/
const promise2 = new Promise((resolve,reject) => {
setTimeout(() => {
resolve("哈哈哈");
},2000)
})
console.log(promise2);
promise2.then(result => {
console.log(result);
},reason => {
console.log("出错了");
})
/*
catch() 用法和then类似,但是需要一个回调函数作为参数
catch() 中的回调函数只会在Promise被拒绝时才调用
catch() 相当于then(null,reason => {})
catch() 就是一个专门处理Promise异常的方法
*/
promise2.catch(reason => {
console.log("出错啦!");
})
console.log("测试是否会正常执行!");
/*
finally()
-无论是正常存储数据还是出现异常了,finally总会执行
-但是finally的回调函数中不会接收到数据
-finally() 通常用来编写一些无论成功与否都要执行的代码
*/
promise2.finally(() => {
console.log("我是finally,没有谁能阻挡我的正常执行的!");
})
</script>
</body>
</html>