正常使用异步axios
此时async:true，通过Promise的回调函数then设置变量videoSrc的值，然后vue数据驱动去渲染
<template>
<div>
<video :src="videoSrc" controls></video>
</div>
</template>
<script>
export default {
data() {
return {
videoSrc: '' // 用于存储Promise返回的值
};
},
mounted() {
// 异步操作，比如一个网络请求
const promise = fetchVideoSrc(); // 假设fetchVideoSrc()返回一个Promise对象
promise.then(result => {
this.videoSrc = result; // 将Promise返回的值赋给videoSrc变量
});
}
};
</script>
使用await同步存在问题
await会导致使用await同步的函数都返回Promise，也就是return永远是个异步函数
import axios from 'axios';
async function fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
console.log(response.data); // 处理响应数据
return response.data; // 返回数据给调用者
} catch (error) {
console.error(error);
throw error;
}
}
// 同步调用，这里有个问题就是使用await同步调用请求时，这个函数要声明为async，函数返回的永远是Promise对象，也就是最后一层永远要有个then函数去获取。
try {
const data = await fetchData(); //这里使用await,那么使用这个的函数就要声明为async
console.log(data); // 处理返回的数据
} catch (error) {
console.error('请求出错', error);
}
for循环生成的元素中带有需要及时请求的新属性
解决办法是先遍历数组,把新属性加进去,然后强制刷新
<a-timeline-item v-for="(item, index) in arrayList"
:key="index">
<a-card :title="statusFormat(item.status)" :bordered="false">
<p> 姓名: {{item.userName}}</p>
<p> 处理时间: {{item.time}}</p>
<p v-if='item.attach'>
处理附件:
<img v-if="getMediaType(item.attach) == 'img'" :src="item.imageUrlBlob" @click="previewImg(imageUrlBlob)" style="height: 200px;" />
</p>
</a-card>
</a-timeline-item>
<script>
//要从arrayList入手,去先把列表里需要根据id获取的新属性放入arrayList
for(const item of this.arrayList){
if(item.attach){
getBlobData(item.attach).then(response => {
// 创建一个URL对象以加载Blob数据
const blob = new Blob([response])
//放入新属性
item.imageUrlBlob = window.URL.createObjectURL(blob)
//强制渲染,因为list.item多了个imageUrlBlob,不一定会自动渲染
this.$forceUpdate()
})
}
}
</script>