JS：如何使第二个功能等待第一个功能的结果？

Question

我有2个函数，我需要函数B在函数A完成后才能运行。我已经阅读了一些文档，根据这些文档，我需要使用async和await。函数A：我的函数A涉及一些AJAX调用。我已经答应了function get_initial_prices() {         return new Promise(resolve => {         var size_selected = $('input[name=size]:checked').val();                        var c_slug = $('.c_slug').text();                        var product_slug = $('.product_slug').text();            req = $.ajax({                     url: "/prices/",                      data: { // Pass parameters in separate object                       size_selected: size_selected,                        c_slug: c_slug,                        product_slug: product_slug                      },                  });             req.done(function (response) {                  $('#prices').empty();                  var prices = response.prices;                  $('.price').text(function (index) {                      return "S/ " + prices[index];                  });                 });               });            }函数B：目前，此函数将仅收集所有带有.priceclass的span元素中的文本并发出警报。这些文本由呈现function A。function calculate_savings() {       await get_initial_prices();       var prices = $(".price")                    .map(function () {                    return $(this).text().replace('S/ ', '');                    }).get().join();       alert("savings: " + prices);}当文档准备就绪时，我将它们都调用，但是get_initial_prices应该先运行：$("document").ready(function () {    get_initial_prices();    calculate_savings();   });

Answer 1

new Promise当$.ajax已经返回一个诺言时，不要用创建诺言。

另外，您只能await在async函数中使用。而且，在回调get_initial_prices中calculate_savings和在ready回调中调用都没有意义。

例如：

function get_initial_prices() {

    var size_selected = $('input[name=size]:checked').val();

    var c_slug = $('.c_slug').text();

    var product_slug = $('.product_slug').text();

    return $.ajax({

        url: "/prices/",

        data: { // Pass parameters in separate object

            size_selected: size_selected,

            c_slug: c_slug,

            product_slug: product_slug

        },

    }).then(function (response) {

        $('#prices').empty();

        var prices = response.prices;

        $('.price').text(function (index) {

            return "S/ " + prices[index];

        });

    });

}

async function calculate_savings() {

    await get_initial_prices();

    var prices = $(".price").map(function () {

        return $(this).text().replace('S/ ', '');

    }).get().join();

    alert("savings: " + prices);

}

$("document").ready(function () {

    calculate_savings();

});

我应该补充一点，尽管首先使用响应将价格写在页面上，然后立即将这些价格再次从页面提取到数组中是很奇怪的。似乎您应该只跟踪响应，而该响应已经是一个数组。

Answer 2

函数的简化版本（注意“数据”和“ responseData”变量）

function get_initial_prices() {

return new Promise(resolve => {

    $.ajax({

        url: "/prices/"

    }).done(function (data) {

        alert('get_initial_prices fired!');

        resolve(data);

    });

})

}

function calculate_savings(responseData) {

    alert(responseData);

}

$(document).ready(function() {

    get_initial_prices().then(calculate_savings);

});