axios之使用await同步问题

正常使用异步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>