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