在 JavaScript 中等待 ajax 调用答案

【问题标题】：Await ajax call in JavaScript在 JavaScript 中等待 ajax 调用
【发布时间】：2021-06-09 05:34:26
【问题描述】：

我知道有很多关于此的问题和答案，但我是 JavaScript 新手，我正面临 async/await 函数的问题。我有两个函数：getInvoices() 我有一个 ajax 调用来获取所需的数据，loadBarChart(data) 呈现一个条形图。对于我使用的图表 ApexCharts。所以我首先调用getInvoices() 函数来获取数据，然后我调用loadBarChart(data) 传递数据，如下所示：

$(document).ready(function () {
    var data = getInvoices();
    console.log(data); // data is undefined
    loadBarChart(data); 
 });

data 总是 undefined 可能是因为 ajax 调用没有完成。

这里是getInvoices()功能码：

function getInvoices() {
    var url = "@Url.Action("GetInvoiceCustum");
        $.ajax({
            type: "GET",
            dataType: "json",
            url: url,
            success: function (data) {
                return data;
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    }

在this之后我改了代码，但最后我不知道如何将数据从getInvoices()传递到loadBarChart(data);

到目前为止，这就是我所拥有的：

$(document).ready(function () {
    var url = "@Url.Action("GetInvoiceCustum");
    var ajax1 = new Promise((resolve, reject) => {
        $.ajax({
            type: "GET",
            url: url,
            success: function (data) {
                resolve("OK");
                result = data;
            },
            error: function () {
                reject(" ERROR");
            },
        });
    });

   //At this point how can I acces the result from ajax call, and call the loadBarChart(data)
     ajax1.then(values => {
        console.log(values)
     }, reason => {
        console.log("Errors: " + reason)
     });

    ajax1.then(function (data1) {
        var data = data1.result;
        console.log(a);
        return data1.result;
        //loadBarChart(data);
    })

});

这样做我如何访问返回getInvoices() 的数据，然后调用loadBarChart(data)，或者有其他方法可以做到这一点？

【问题讨论】：

标签： javascript ajax asp.net-ajax

【解决方案1】：

你可以像第一个函数一样调用第二个函数

        $.ajax({
            type: "GET",
            url: url,
            success: function (data) {
                loadBarChart(data);
            },
            error: function () {
                reject(" ERROR");
            },
        });

【讨论】：

是的，但是我有一个调用getInvoices() 来更新/刷新图表的按钮，如果我按此按钮 10 次，我将有 10 个图表。为避免这种情况，loadBarChart() 应该在 ajax 调用之外。根据this updateSeries，如果loadBarChart() 在ajax 调用之外，我可以处理这个问题。
在这种情况下，您需要先在准备好空数据的文档上调用 chart.updateSeries(getInvoices()) 和 loadBarChart()。
是的，这就是我现在所拥有的。并且为了避免一开始有空数据，根据this，我像之前所说的那样对我的代码进行了更改。我认为唯一的问题是我不知道如何将结果传递给loadBarChart()