1. Promise
1.1 对象和状态
是什么?
是前端开发时js中的一个对象(包裹)。【对象】【异步请求】
# 对象中有一个状态的值,status
# 创建对象,不赋值,status=pendding
let v1 = new Promise(function(resolve, reject){})
# 创建对象,为resolve赋值,status=fufilled
let v2 = new Promise(function(resolve, reject){
resolve("okk")
})
可以简写为: let v2 = Promise.resolve("okk")
# 创建对象,为reject赋值,status=rejected
let v3 = new Promise(function(resolve, reject){
reject("okk")
})
可以简写为: let v3 = Promise.reject("haha")
1.2 回调函数
对象 = Promise ...
对象.then(函数1, 函数2)
对象.then(函数3, 函数4)
对象.catch(函数5)
关于回调函数的执行:
- 状态=pendding,回调函数都不会被执行
- 状态=fufilled,基于then添加进去的第一个回调函数,就会被触发执行。即函数1和函数3
- 状态=rejected,基于then添加进去的第二个回调函数,就会被触发执行,且基于catch添加的函数也会被执行。即函数2和函数4和函数5
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
let v1 = new Promise(function (resolve, reject) {
// 状态为pendding
// resolve("OK") // 状态为fufilled 值为"OK"
reject("INFO") // 状态为rejected 值为"INFO"
})
v1.then(
function (res) {
console.log(res)
},
function (reason) {
console.log(reason)
}
)
</script>
</body>
</html>
1.3 then的返回值
对象=Promise ...
返回值 = 对象.then(函数1, 函数2)
返回值.then(函数3,函数4)
如果在函数1中,返回一个新的Promise对象,接下来执行函数3或函数4,取决于:函数1返回的那个Promise对象的状态。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
let v1 = new Promise(function (resolve, reject) {
// resolve("INFO") // 状态为rejected 值为"INFO"
reject("INFO")
})
let v2 = v1.then(
function (res) {
console.log("111: ", res)
console.log("v1: fufilled")
return new Promise(function (resolve, reject) {
resolve("hhh") // 状态为fufilled 值为"INFO"
})
},
function (reason) {
console.log("222: ", reason)
console.log("v1: rejected")
return new Promise(function (resolve, reject) {
reject("aaa") // 状态为rejected 值为"INFO"
})
}
)
v2.then(
function (res) {
console.log("333: ", res)
},
function (reason) {
console.log("444: ", reason)
}
)
</script>
</body>
</html>