Vue3, compotite api, call function inside async function, server error 500.

Half away in my Vue component and long days ,-D

So simple async funtion : inside IF statment, when I catch "if response.data.banner is null". and then I will try call other function getBanners();.

 Which  is also async, Laravel gives error  500. And does not find array of Banners.
 if I call function itself  getBanners();, Laravel does not give any errors.



       let banners = ref([]); 
      let banner = ref();

    async function updateBanners() {            
         console.log('updating Banner  ...' ); 
   try {
       const response =  await axios.post("https://domain.client.fi/api/update", updateBannerData);   

 if(response.data.banner == null )
   {
     console.log( response.data.banner);
    console.log('updating Banners array object ...' );
    getBanners();
 }  

  } catch (error) {}


    async function getBanners()  {      
        try {
          const response =  await axios.post("https://frankvps.server.datapilvi.fi/api/mainos", bannerData);
            console.log(response.data);

         banners.value = response.data;
          getBannersCount.value = response.data.banners.length;      
          updateBannerData.site_id =  response.data.site_id;
              startBanner();

       } catch(error)  {
          console.error("Error fetching banners:", error);
      }
     }

Q) wouldbe easier to update Banners(ref) ant call all banner array again. ? if I have banner id, how to remove that banner from Banners ref ?

Thanks Mika.

LaryAI

2 years ago

Level 58

It seems like you're encountering a server error when calling getBanners() from within the updateBanners() function after a condition is met. A 500 error typically indicates a server-side issue, so the problem might not be with your Vue.js code but rather with your Laravel backend.

However, I'll provide some guidance on how to handle the async functions in Vue 3 with the Composition API, and how to remove a banner from the banners ref array by its ID.

First, ensure that you are correctly awaiting the getBanners() function call within the updateBanners() function. If getBanners() is an async function, you should await it to ensure that the operation completes before proceeding.

Here's how you might modify your updateBanners() function:

async function updateBanners() {
  console.log('updating Banner ...');
  try {
    const response = await axios.post("https://domain.client.fi/api/update", updateBannerData);

    if (response.data.banner == null) {
      console.log(response.data.banner);
      console.log('updating Banners array object ...');
      await getBanners(); // Make sure to await this async call
    }
  } catch (error) {
    console.error("Error updating banners:", error);
  }
}

To remove a banner from the banners ref array by its ID, you can use the Array.prototype.filter() method. Here's a function that does that:

function removeBannerById(bannerId) {
  banners.value = banners.value.filter(banner => banner.id !== bannerId);
}

You would call this function with the ID of the banner you want to remove.

Regarding your question about whether it would be easier to update the banners ref and call the entire banner array again, it depends on the specific requirements of your application. If the list of banners is not too large and you want to ensure that the client has the most up-to-date list, then fetching the entire list again might be a simple and effective approach. However, if you're only updating or removing a single banner, it might be more efficient to update the banners ref array directly without making an additional network request.

Remember to check your Laravel logs for the specific error causing the 500 response. It could be an issue with the route, controller method, database query, or other server-side logic. Fixing the server-side error should resolve the 500 error you're encountering.

gych

2 years ago

Level 29

Which part of your code exactly gives you the error? To remove a banner by id see Larry's response.

mikromike

2 years ago

Level 29

getBanners() inside async function updateBanners().

yes I try figure out how to use

  function removeBannerById(banner_id)  {

 banners.value = banners.value.filter(banner => banner.id !== banner_id); 
 <--- this line is never remove id from  array

console.log(banners.value);
 }

mikromike

2 years ago

Level 29

sorry Larry AI, banners.value = banners.value.filter(banner => banner.id !== banner_id); tah code does not remove single banner from barrays ref array ,-C

Please or to participate in this conversation.