vue生命周期函数beforeUnmount内，如何及时异步发送axios请求?

Question

思路：
这是个购物车跳转界面，当我点击结算的时候，路由跳转，页面经过beforeUnmount生命周期函数，但是由于异步的原因，经常跳转过去才接受到数据，导致结算页面无法渲染，希望各位大佬可以给一个解决思路
内部代码如下

beforeUnmount (){    
           //数据    
            const route = useRoute()
           const shopId = route.params.id
           const store = useStore()
            const cartList = store.state.cartList 
             const products= cartList[shopId]
            const userinfo=JSON.parse(localStorage.userinfo)  
            console.log(userinfo.id)
            //数据发送
            const getContentData = async () =>{
            const result = await request.post(`/api/v1/create`,
            { 
            id:userinfo.id,
            addressId:1,
            shopId,
            shopName:"沃尔玛",
            products:JSON.stringify(products)
            },
            
            
        );
        console.log(result)
    }

    watchEffect(() => {
        getContentData()
    })      
        }
    }

Answer 1

建议在点击页面跳转事件中，先进行接口请求，当接口请求成功之后在进行页面的跳转，而不在unMounted钩子中调用接口，如果接口时间较长，可以做一个loading过渡效果