vue3实际开发中遇到的问题:setup遇到异步请求逻辑时结合async使用方法

本文探讨了Vue中如何处理异步请求,特别是在setup阶段如何确保异步数据可用。通过使用Promise和async/await语法,实现了在组件加载完成时有效获取到异步数据。

setup执行在 VUE实例的beforeCreate()与created()之前 函数抛出的逻辑内容包括数据和方法都已完成

  • setup引入的JS逻辑:
        export  default function useProductSetup() {
            const getData = (param) => {
                //省略异步请求代码
                return data;
            };
            return {
                getData
            }
        }
  • VUE文件
        setup(props, context) {
            const {
                getData
            } = useProductSetup();
            return {
                getData
            };
        },
        beforeCreate(){
            this.getdata( );  //此时方法已存在
        },

此时 因为函数getdata存在异步请求(开发中绝大部分接口访问都是异步)

        mounted() {
                let res = this.getData({
	     			 Param
                });
                res;//此时无法获得该异步请求数据,res为空
        },

若将JS返回的函数封装为promise对象 在vue实例中利用await即可获得该数据进行操作(async精髓 同步方式写异步)

        export  default function TestSetup() {
            const getData = (param) => {
                return new Promise((resolve,reject) => {
                	//省略异步请求代码
                	resolve(data)})
            };
            return {
                getData
            }
        }
        async mounted() {
             let res = await this.getData();
             res;//此时即可获得该异步请求数据
        },

这里也可以写成回调函数的方式

        export  default function TestSetup() {
            const getData = (param,success) => {
                	//省略异步请求代码
                	success:success
            };
            return {
                getData
            }
        }
        async mounted() {
             await this.getData(param,{
             	this.$toast.success("成功");//等后续处理代码
             	//但前提是这里的异步执行在ue实例化之后可以获取vue实例
             }
             );
        },

但这里依然无法解决没有VUE可操作实例的问题,且容易造成回调地狱

Vue 3开发中,异步请求是常见操作,Promise异步请求async使用有助于确保应用顺畅运行。 ### Promise异步请求 Promise是一种处理异步操作的方式,它有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。在Vue 3里,可利用`fetch` API或`axios`库发起Promise异步请求。以下是使用`fetch`的示例: ```vue <template> <div> <button @click="fetchData">获取数据</button> <div v-if="data">{{ data }}</div> </div> </template> <script setup> import { ref } from &#39;vue&#39;; const data = ref(null); const fetchData = () => { // 使用fetch发起请求,返回一个Promise对象 fetch(&#39;https://api.example.com/data&#39;) .then(response => { if (!response.ok) { throw new Error(&#39;网络响应异常&#39;); } return response.json(); }) .then(result => { data.value = result; }) .catch(error => { console.error(&#39;请求出错:&#39;, error); }); }; </script> ``` 在上述代码中,`fetch`方法发起请求并返回一个Promise对象,通过`then`方法处理响应,`catch`方法捕获可能出现的错误。 ### async和await `async`是一个关键字,用于定义异步函数,其执行会返回一个Promise对象,且会把内部的值进行Promise的封装。`await`只能放在`async`函数里,它等待一个返回Promise对象的表达式执行完毕,并返回结果。当需要等第一个请求返回数据后,再执行第二个请求,可使用`async/await`实现异步请求。示例如下: ```vue <template> <div> <button @click="fetchDataSequentially">顺序获取数据</button> <div v-if="secondData">{{ secondData }}</div> </div> </template> <script setup> import { ref } from &#39;vue&#39;; const secondData = ref(null); const fetchDataSequentially = async () => { try { // 第一个请求 const firstResponse = await fetch(&#39;https://api.example.com/first-data&#39;); if (!firstResponse.ok) { throw new Error(&#39;第一个请求网络响应异常&#39;); } const firstResult = await firstResponse.json(); // 第二个请求使用第一个请求的结果作为参数 const secondResponse = await fetch(`https://api.example.com/second-data?param=${firstResult.id}`); if (!secondResponse.ok) { throw new Error(&#39;第二个请求网络响应异常&#39;); } const secondResult = await secondResponse.json(); secondData.value = secondResult; } catch (error) { console.error(&#39;请求出错:&#39;, error); } }; </script> ``` 在这个示例中,`fetchDataSequentially`是一个异步函数,使用`await`关键字等待每个请求完成,保证请求按顺序执行。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

跳动的世界线

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值