master

分支 (1)

管理

管理

master

ajax145
/
练习promise.html

<!DOCTYPE html>
<html lang="zh-CN">

<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>promise</title>
</head>

<body>
    <button onclick="testPromise()">测试链式调用</button>
    <script>
        const a = Math.random()
        const b = Math.random()
        new Promise(function(resolve, reject) {
                if (a > b) {
                    //此时认为成功
                    resolve("我成功了")

                } else {
                    //否则失败
                    reject("我失败了")
                }
            })
            .then((result) => {
                //这里获取的是成功的结果
                console.log(result)
            })
            .catch((error) => {
                //这里获取的是失败的结构
                console.log(error);
            })
    </script>
    <script>
        function testAxios() {
            axios({
                    url: "",
                })
                .then((result) => {
                    //发起第二次请求
                    return axios({
                        url: "2",
                        params: result
                    })
                })
                .then((result) => {
                    //此时的result结果是 上次的promise执行的结果
                    return axios({
                        url: "3",
                        params: result,
                    })
                })
                .then((result) => {
                    //此时的result结果是 上次的promise执行的结果
                    return axios({
                        url: "4",
                        params: result,
                    })
                })
                .then((result) => {
                    return axios({
                        url: "5",
                        params: result,
                    })
                })
        }
        //promise 最大的作用是 将回调地狱的写法变成链式调用
    </script>
    <script>
        function testPromise() {
            new Promise(function(resolve, reject) {
                    //想要3秒钟之后成功执行 得到一个15000的结果
                    setInterval(() => {
                            resolve(15000) //起薪
                        },
                        3000)
                })
                .then((result) => {
                    // alert(result)
                    // //返回的是一个值或者是一个promise对象
                    // return new Promise()
                    return result + 1000
                })
                .then((result) => {
                    return result + 1000
                })
                .then((result) => {
                    return result + 1000
                })
                .then((result) => {
                    return new Promise(function(resolve, reject) {
                        resolve(result + 2000)
                    })
                })
                .then((result) => {
                    //只有等到上一个结果执行完毕
                    //在这个位置获取上一个的结果
                    alert(result)
                })
                .catch((error) => {
                    alert(error)
                })

        }
    </script>
</body>

</html>