Bootstrap

【django】扩展

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