延迟滑动滑块，直到从调用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

仅检查变量（在获得响应后分配的变量）为null或不为null

例如：

 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,
                            }
                            }
                        ]
                    });
                } 
            }
         }