ES8新特性_前端 es8新特性-CSDN博客

本文链接：https://blog.csdn.net/2201_75355888/article/details/145738374

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES8新特性</title>
</head>
<body>
    <script>
        /*
        async和await
        两种语法结合使用，可以让异步操作变得更加清晰
        async函数:返回值为promise对象,返回结果由async函数执行返回
        await表达式:必须写在async函数中，返回的值是promise返回成功的值,如果返回失败则由try-catch捕获异常

        */
    //    async function fn(){
    //     //return '今天天气不错'
    //     //触发异常
    //     throw new Error('出错了')
    //    }
    //    const result=fn()
    // console.log(result) 
        //创建promise对象
        // const p=new Promise((resolve,reject)=>{
        //     //resolve("商品相关的数据")
        //     reject("数据失败")
        // })
        // async function main(){
        //     try{
        //         let result=await p
        //         console.log(result)
        //     }catch(e){//程序出现异常后，将执行catch体代码
        //         console.log(e)
        //     }
            
            
        // }
        // //调用函数
        // main()
         

    </script>   
</body>
</html>

async与await封装ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= j3 kenyb, initial-scale=1.0">
    <title>async与await封装ajax</title>
</head>
<body>
    <script>
        //发送ajax请求，返回Promise对象
        function sendAjax(url){
            return new Promise((resolve,reject)=>{
                //1.创建Ajax对象
                const xhr=new XMLHttpRequest()
                //2.初始化数据
                xhr.open("GET",url)
                //3.发送
                xhr.send()
                //4.处理响应数据
                xhr.onreadystatechange=function(){
                //判断响应协议值
                if(xhr.readyState===4){//4有返回值
                    if(xhr.status >=200 &&xhr.status<300){
                            //表示成功
                            resolve(xhr.response)//打印数据
                    }else{
                            //表示失败
                            reject(xhr.status)
                    }

                }
            }
            })
        }
        //async与await测试
        async function main() {
            let result=await sendAjax("https://www.jd.com")
        }
    </script>
</body>
</html>