Home » Jquery » javascript – apply function after calling data response-Exceptionshub

javascript – apply function after calling data response-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I want to apply slider function after calling API response,

this this my code

async getProducts () {

                let response = await axios.get('{{url("/")}}/api/products?new=1&limit=6&order=desc&sort=created_at');
                const products = response.data.data;
                this.products = products;
                let element = document.getElementById("sliderContainer");
                element.classList.add("regular");
                this.applySlider();
}

as you see i used async await but applySlider() function work before response?
what is my mistake? please, help me
Thanks in advance
this is applySlider() function

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,
                            }
                            }
                        ]
                    });
                } 
            }
How to&Answer:

You can use then method.

The then() method returns a Promise. It takes up to two arguments: callback functions for the success and failure cases of the Promise.


Try something like this:

axios.get('{{url("/")}}/api/products?new=1&limit=6&order=desc&sort=created_at')
  .then(response => {
    // handle success
    const products = response.data.data;
    this.products = products;
    let element = document.getElementById("sliderContainer");
    element.classList.add("regular");
    this.applySlider();
  })

Minimal example:

axios.get('{{url("/")}}/api/products?new=1&limit=6&order=desc&sort=created_at')
  .then(response => {
    this.products = response.data.data;
    document.getElementById("sliderContainer").classList.add("regular");
    this.applySlider();
})

Check the full axios documentation rigth here.