ES6 语法详解(Promise对象(重点))

彼岸舞

发布于 2021-08-20 10:16:25

46600

代码可运行

运行总次数：0

代码可运行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        /**
         * Promise对象
         * 1. 理解:
         *     Promise对象; 代表了未来某个将要发生的事件(通常是一个异步操作)
         *     有了Promise对象,可以将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数(俗称'回调地狱')
         *     ES6的Promise是一个构造函数,用来生成Promise实例
         * 2. 使用Promise的基本步骤(2步)
         */
        // 1: 创建Promise对象
        /* 
        let promise = new Promise((resolve, reject) => {
            // 初始化Promise状态为pending
            // 2:执行异步操作
            // ajax xxx query
            // 如果执行成功
            if(true){
                resolve('执行成功') //修改Promise的转台为fullfilled
            }else{
                reject('执行失败') // 修改Promise的转台为rejected
            }
        }) */
        // 2: 调用Promise的then()
        /*
        then
            第一个函数是成功返回的时候执行
            第二个函数是失败返回的时候执行
        catch
            异常的时候执行
        promise.then(res => {
            console.log(res)
        },err => {
            console.log(err)
        }).catch(err => {
            console.log(err)
        })
         */
        /**
         * promise 对象的三种状态
         * pending: 初始化状态
         * fullfilled: 成功状态
         * rejected: 失败状态
         */

        /**
         * 应用:
         *     使用Promise实现超时处理
         * 
         *     使用Promise封装处理Ajax请求
         */
        /* 
        let request = new XMLHttpRequest()
        reject.onreadystatechange = function(){}
        request.responseType = 'json'
        request.open('GET', 'http://www.baidu.com')
        request.send() 
        */

        // 上面的代码 不可以执行 只做参考
        let promise = new Promise((resolve, reject) => {
            // 使用定时器模拟异步操作
            setTimeout(() => {
                console.log("send ajax!")
                let flag = true;
                if (flag) {
                    resolve("执行成功!")
                } else {
                    reject("执行失败")
                }
            }, 1000)
        })
        
        promise.then(res => {
            console.log('第一个函数:',res)
        },err => {
            console.log('第二个函数:',err)
        }).catch(error => {
            console.log("服务器开小差了!")
        })
    </script>
</html>