Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience

 <script>
    $.ajax({
        method: "POST",
        url: "API/actions/getAllCategories",
        async: false,
        success: function(msg) {
            newdiv = "";
            var count = 1;
            msg.forEach(function(row) {
                if (count == 1) {
                    newdiv += '  <li class="active">' +
                        '<a data-toggle="tab" href="#tab' + count + '" aria-expanded="true">' +
                        '<span>' + row.name + '</span>' +
                        '</a>' +
                        '</li>';
                } else {
                    newdiv += '  <li>' +
                        '<a data-toggle="tab" href="#tab' + count + '" aria-expanded="true">' +
                        '<span>' + row.name + '</span>' +
                        '</a>' +
                        '</li>';
                }
                $.ajax({
                    method: "POST",
                    url: "API/actions/getProductsbycatId",
                    async: false,
                    data: {
                        "categoryId": row.id,
                        "countryId": `<?php echo $_SESSION['evoucher']['countryId'] ?> `
                    },
                    success: function(msg1) {
                        var active = '';
                        if (count == 1) {
                            active = "active in";
                        }
                        newdiv1 = ' <div id="tab' + count + '" class="tab-pane fade ' + active + '">' +
                            '    <div class="bbb_viewed">' +
                            '        <div class="row">' +
                            '            <div class="col">' +
                            '                <div class="bbb_main_container">' +
                            '                    <div class="bbb_viewed_title_container">' +
                            '                        <div class="bbb_viewed_nav_container">' +
                            '                            <div class="bbb_viewed_nav bbb_viewed_prev"><i class="fas fa-chevron-left"></i></div>' +
                            '                            <div class="bbb_viewed_nav bbb_viewed_next"><i class="fas fa-chevron-right"></i></div>' +
                            '                        </div>' +
                            '                    </div>' +
                            '                    <div class="bbb_viewed_slider_container">' +
                            '                        <div class="owl-carousel owl-theme bbb_viewed_slider">';

                        msg1.forEach(function(row1) {

                            newdiv1 += '                            <div class="owl-item">' +
                                '                                <div class="bbb_viewed_item1 discount d-flex flex-column align-items-center justify-content-center text-center">' +
                                '                                    <div class="bbb_viewed_image"><img src="' + row1.pathimage2 + '" alt=""></div>' +
                                '                                    <div class="bbb_viewed_content text-center">' +
                                '                                        <div class="bbb_viewed_name"><a href="#">' + row1.name + '</a></div>' +
                                '                                    </div>' +
                                '                                </div>' +
                                '                            </div>';

                        })
                        newdiv1 += '                        </div>' +
                            '                    </div>' +
                            '                </div>' +
                            '            </div>' +
                            '        </div>' +
                            '    </div>' +
                            '</div>';

                        $("#tabs").append(newdiv1);
                    },
                    error: function(error) {
                        alert("error");
                    }
                })

                count++;
            })
            $("#bestsellernav").html(newdiv);

        },
        error: function(error) {
            alert("error");
        }
    })
</script>

I am making an AJAX call to different APIs and I am making many ajax calls at the same time but I am getting this error in my console.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects for the end user’s experience.

I think it is related to async:false, but I can't get rid of it because my page is not staying the way it is. Any alternatives for async:false?