VUE中方法async/await的正确用法。
本帖最后由 cqwcns 于 2022-10-11 17:18 编辑以一些demo为例，需求是3个方法按顺序执行，即控制台应该是输出：第1件事→第2件事→第3件事。
但实际执行控制台输出的顺序是：第1件事→第3件事→第2件事。
我不知道正确的写法是怎样，请各位大佬指教，感谢。
<!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:23 编辑
async是异步哪个先完事 他执行哪个 请求是有延迟的你在事件2成功返回后执行 事件3方法 需要配合promise使用，或者使用已经promise化的请求库 例如axios
meng234885 发表于 2022-10-11 17:20
async是异步哪个先完事 他执行哪个 请求是有延迟的你在事件2成功返回后执行 事件3方法
但现在的情况是事件2未完成就执行事件3了。
cqwcns 发表于 2022-10-11 17:24
但现在的情况是事件2未完成就执行事件3了。
是的 所以你在 事件2中 返回成功后 执行 事件3 就能达到你的目的了 但是缺陷是 事件2 失败了 3也就不执行了 meng234885 发表于 2022-10-11 17:25
是的 所以你在 事件2中 返回成功后 执行 事件3 就能达到你的目的了 但是缺陷是 事件2 失败了 3也就不执行 ...
事件2 失败了 3也就不执行了 这个没有问题。
现在主要是我不知道如何让事件2全部执行完成，在执行事件3。
业余水平，小白，感谢指教。 cqwcns 发表于 2022-10-11 17:24
但现在的情况是事件2未完成就执行事件3了。
像楼上老哥说的 promise 不错的选择 返回结果resolved成功 rejected失败 然后再做后续处理 笨方法你的代码 41行后 添加 that.doSomeThing3() 试一下吧
<!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> linguo2625469 发表于 2022-10-11 17:40
试一下吧
完美解决，感谢指教。{:1_893:}
我学习消化一下代码。
页:
[1]
2