VUE中方法async/await的正确用法。

cqwcns · 发表于 2022-10-11 17:10

本帖最后由 cqwcns 于 2022-10-11 17:18 编辑

以一些demo为例，需求是3个方法按顺序执行，即控制台应该是输出：第1件事→第2件事→第3件事。
但实际执行控制台输出的顺序是：第1件事→第3件事→第2件事。
我不知道正确的写法是怎样，请各位大佬指教，感谢。

[HTML] 纯文本查看 复制代码

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

<head>
    <meta charset="utf-8">
    <title>TEST</title>
    <!-- Vue 3 -->
    <script src="https://candyissupersweet.gitee.io/cdn/vue3/vue.global.prod.js"></script>
</head>

<body>

    <div id="app"> </div>

    <script type="text/javascript">
        let that = null, App = null;

        App = {
            mounted() {
                that = this;
                that.start();
            },
            methods: {
                async start() {
                    await that.doSomeThing1();
                    await that.doSomeThing2();
                    await that.doSomeThing3();
                },
                doSomeThing1() {
                    console.log('第1件事');
                },
                doSomeThing2() {
                    // 这里请求一些服务器的数据
                    const xhr = new XMLHttpRequest();
                    xhr.open('get', '/data.xlsx', true);
                    xhr.responseType = "arraybuffer";
                    xhr.onload = () => { readXLSX(xhr.response) };
                    xhr.send();
                    function readXLSX(data) {
                        console.log('第2件事');
                        that.byteLength = data.byteLength;
                    }
                },
                doSomeThing3() {
                    console.log('第3件事');
                    console.log(that.byteLength);
                }
            }
        }

        const app = Vue.createApp(App);
        app.mount("#app");

    </script>
</body>

</html>

meng234885 · 发表于 2022-10-11 17:20

本帖最后由 meng234885 于 2022-10-11 17:23 编辑

async是异步哪个先完事他执行哪个请求是有延迟的你在事件2成功返回后执行事件3方法

linguo2625469 · 发表于 2022-10-11 17:22

需要配合promise使用，或者使用已经promise化的请求库例如axios

cqwcns · 发表于 2022-10-11 17:24

meng234885 发表于 2022-10-11 17:20
async是异步哪个先完事他执行哪个请求是有延迟的你在事件2成功返回后执行事件3方法

但现在的情况是事件2未完成就执行事件3了。

meng234885 · 发表于 2022-10-11 17:25

cqwcns 发表于 2022-10-11 17:24
但现在的情况是事件2未完成就执行事件3了。

是的所以你在事件2中返回成功后执行事件3 就能达到你的目的了但是缺陷是事件2 失败了 3也就不执行了

cqwcns · 发表于 2022-10-11 17:33

meng234885 发表于 2022-10-11 17:25
是的所以你在事件2中返回成功后执行事件3 就能达到你的目的了但是缺陷是事件2 失败了 3也就不执行 ...

事件2 失败了 3也就不执行了这个没有问题。

现在主要是我不知道如何让事件2全部执行完成，在执行事件3。

业余水平，小白，感谢指教。

meng234885 · 发表于 2022-10-11 17:33

cqwcns 发表于 2022-10-11 17:24
但现在的情况是事件2未完成就执行事件3了。

像楼上老哥说的 promise 不错的选择返回结果resolved成功 rejected失败然后再做后续处理

meng234885 · 发表于 2022-10-11 17:39

笨方法你的代码 41行后添加 that.doSomeThing3()

linguo2625469 · 发表于 2022-10-11 17:40

试一下吧

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
    <meta charset="utf-8">
    <title>TEST</title>
    <!-- Vue 3 -->
    <script src="https://candyissupersweet.gitee.io/cdn/vue3/vue.global.prod.js"></script>
</head>
 
<body>
 
    <div id="app"> </div>
 
    <script type="text/javascript">
        let that = null, App = null;
 
        App = {
            mounted() {
                that = this;
                that.start();
            },
            methods: {
                async start() {
                    await that.doSomeThing1();
                    await that.doSomeThing2();
                    await that.doSomeThing3();
                },
                doSomeThing1() {
                    console.log('第1件事');
                },
                doSomeThing2() {
                    return new Promise((res,rej)=>{
                        // 这里请求一些服务器的数据
                        const xhr = new XMLHttpRequest();
                        xhr.open('get', '/data.xlsx', true);
                        xhr.responseType = "arraybuffer";
                        xhr.onload = () => { 
                            // 请求成功后返回
                            res(readXLSX(xhr.response))
                        };
                        xhr.send();
                        function readXLSX(data) {
                            console.log('第2件事');
                            that.byteLength = data.byteLength;
                        }
                    })
                },
                doSomeThing3() {
                    console.log('第3件事');
                    console.log(that.byteLength);
                }
            }
        }
 
        const app = Vue.createApp(App);
        app.mount("#app");
 
    </script>
</body>
 
</html>

cqwcns · 发表于 2022-10-11 17:56

linguo2625469 发表于 2022-10-11 17:40
试一下吧
[mw_shl_code=javascript,true]

完美解决，感谢指教。

我学习消化一下代码。

帐号		自动登录	找回密码
密码			注册[Register]

[求助] VUE中方法async/await的正确用法。

免费评分

免费评分

免费评分

免费评分