美文网首页
ES6异步请求

ES6异步请求

作者: 番茄向前看 | 来源:发表于2020-03-15 19:17 被阅读0次

Promise

//Promise其实就是ajax的一个封装方式,简化ajax复杂度
//Promise-all适合读取大量数据,全部取完以后执行then

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
        let data1 = "http://127.0.0.1:5500/ajax/text1.txt";
        let data2 = "http://127.0.0.1:5500/ajax/text2.txt";
        //Promise其实就是ajax的一个封装方式
        let promise = new Promise((resolve, reject) => {
            //异步请求
            //resolve 成功
            //reject 失败
            $.ajax({
                url: data1,
                dataType: 'json',
                success(arr) {
                    resolve(arr)
                },
                error(res) {
                    reject(res);
                }
            })
        }).then(
            arr => {
                alert("成功!")
                console.log(arr)
            },
            res => {
                alert("失败!")
                console.log(res.responseText)
            })

        //Promise-all适合读取大量数据
        Promise.all([
            $.ajax({ url: data1, dataType: 'json' }),
            $.ajax({ url: data2, dataType: 'json' })
        ]).then(arr => {
            let [data1, data2] = arr;
            console.log(data2);
        }, res => {
            alert('失败!');
        })
</script>

async/await/try..catch

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        //async 定义异步操作
        async function show() {
            let a = "我"
            let b = "爱"
            try {//放入可能出错的代码
                let data = await $.ajax({ //定义去执行的异步操作
                    url: "http://127.0.0.1:5500/ajax/text2.txt",
                    dataType: "json"
                })
                console.log(a + b + data.userName);
            } catch (e) {//异常之后可以显示
                alert("读取失败!");
                console.log(e);
            }
        }
        show()
    </script>

相关文章

网友评论

      本文标题:ES6异步请求

      本文链接:https://www.haomeiwen.com/subject/ahhpehtx.html