задерживать скользящий слайдер до получения ответа от вызывающего API

Question

Я использую скользящий ползунок, он работает нормально, но после вызова API-запроса ползунок применяется первым перед ответом API, это моя первая функция

fetchProducts () {
                this.getProducts ().then(response => {
                    const products = response.data.data;
                    this.products = products;
                    /* console.log(this.products); */
                    let element = document.getElementById("sliderContainer");
                    element.classList.add("regular");
                    this.apllySlider();

                })
            },

и это функция ползунка применения

            applySlider() {
                if (this.products.length >= 1) {
                    $(".regular").slick({
                        //dots: true,
                        infinite: true,
                        slidesToShow: 4,
                        slidesToScroll: 4,
                        responsive: [
                            {
                            breakpoint: 992,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 3,
                                infinite: true,
                                dots: true,
                                arrows:false,
                            }
                            },
                            {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2,
                                arrows:false,
                            }
                            },
                            {
                            breakpoint: 480,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2,
                                arrows:false,
                            }
                            }
                        ]
                    });
                } 
            }

как я могу решить эту проблему? заранее спасибо

Answer 1

просто проверьте, что переменная (которую вы назначаете после получения ответа) равна нулю или не равна нулю

например:

 applySlider() {
             if(this.products){
                if (this.products.length >= 1) {
                    $(".regular").slick({
                        //dots: true,
                        infinite: true,
                        slidesToShow: 4,
                        slidesToScroll: 4,
                        responsive: [
                            {
                            breakpoint: 992,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 3,
                                infinite: true,
                                dots: true,
                                arrows:false,
                            }
                            },
                            {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2,
                                arrows:false,
                            }
                            },
                            {
                            breakpoint: 480,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2,
                                arrows:false,
                            }
                            }
                        ]
                    });
                } 
            }
         }