master

分支 (1)

管理

管理

master

syj
/
es7解决异步操作的async await.html

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <script src="./jquery.js"></script>
</head>

<body>

</body>

</html>
<script>
    // 1.es6中的promise使用 可以把异步执行改成同步执行
    // var p = new Promise(function(resolve, reject) {
    //     // resolve("成功了"),
    //     reject("失败了")
    // })
    // console.log(p);
    // p.then(res => {
    //     console.log(res);
    // }).catch(err => {
    //     console.log(err);
    // })
    // 2.1  es7中新增async函数
    // async是“异步”的简写 async用于申明一个异步的function
    // await可以认为是async await的简写，await用于等待一个异步方法执行完成 他返回一个promise对象，可以把异步执行弄成同步执行
    // ！！！await只能在函数外使用 async内部相当于封装了promise对象
    // async function show() {
    //     return "hello "
    // }
    // console.log("async返回的是promise对象", show());
    // show().then(res => {
    //         console.log(37, res);
    //     }).catch(err => {
    //         console.log(39, err);
    //     })
    // 2.2除了async外 跟他搭配的await await的动能相当于替代promise中.then执行的内容 await要的是异步执行的内容
    //！！！如果有await必须有async async要放在await最近的一个函数的外面
    // async function show() {
    //     var a = await $.ajax({
    //         url: "/data/1.json"
    //     })
    //     console.log(a);
    // }
    // show()
    // 3.用async await实现promise功能
    // 3.0原来promise中的ajax请求
    // var p = new Promise(function(resolve, reject) {
    //     $.ajax({
    //         url: "/data/1.txt",
    //         success: function(res) {
    //             resolve(res)
    //         },
    //         error: function(err) {
    //             reject(err)
    //         }
    //     })
    // })
    // p.then(
    //     function(res) {
    //         console.log(res);
    //     },
    //     function(err) {
    //         console.log(err);
    //     }
    // )
    // 3.1用async await实现promise功能
    // async function get() {
    //     var a = await $.ajax({
    //         url: "/data/1.json"
    //     })
    //     var b = await $.ajax({
    //         url: "/data/1.txt"
    //     })
    //     console.log(a, b);
    // }
    // get()
    // 4.async await与promise有时是相辅相成的
    // 比如在封装后台给的不同接口地址时 就需要对ajax进行再次封装
    // 解决问题 1.封装统一接口地址  像在次网络封装wx request uni 等
    function getajax(url) {
        return new Promise(function(resolve, reject) {
            $.ajax({
                url: url,
                success: function(res) {
                    resolve(res)
                },
                error: function(err) {
                    reject(err)
                }
            })
        })
    }
    async function getasync() {
        var a = await getajax("/data/1.json")
        var b = await getajax("/data/1.txt")
        console.log(102, a, b);
    }
    getasync()
        // 解决问题 2.ajax回调地狱问题 下次的数据依赖上次的数据
        // 根据异步1的结果 是否执行2或者3 这样就解决了ajax层层嵌套这些回调地狱
        // async function getasync() {
        //     var a = await getajax("/data/1.json")
        //     if (a) {
        //         var b = await getajax("/data/1.txt")
        //         if (b) {
        //             console.log("a2的结果执行了");
        //         }
        //     } else {
        //         var c = await getajax("/data/2.html")
        //         if (c) {
        //             console.log("a3的结果执行了");
        //         }
        //     }
        // }
        // getasync()
        // 5.saync await的错误处理 如果请求发送异常 怎么处理？把await 放到try中进行执行 如有异常就是用catch进行处理
        // 还原问题 网络请求不可控 会影响后面代码的执行
        // async function getasync() {
        //     let res1 = await getajax("/data/1.json")
        //     let res2 = await getajax("/data/2.html")
        //     console.log(res1, res2);
        //     console.log("笑飞了");
        // }
        // getasync()
        // 解决问题 js原生try{放网络请求可能出错} catch{捕获错误}
    async function getasync() {
        try {
            let res1 = await getajax("/data/1.txt")
            let res2 = await getajax("/data/2.html")
            console.log(res1, res2);
        } catch (error) {
            console.log(error);
        }
        console.log("hahah");
    }
    getasync()
        // async await的优缺点
        // 他把异步请求变成同步请求执行的 async放在最近函数外调用 返回的是promise对象
        // 优点
        // 1.方便级联调用 即调用依次发生的场景
        // 2.同步代码编写方法 promise使用then函数进行链式调用 一直点点点 四一种从左向右的横向写法；async await从上到下顺序执行 就像写同步代码一样更符合代码编写习惯
        // 缺点
        // 没有catch错误处理 需要用js原生的try，catch进行错误处理
</script>