javascript AJAX 调用中断在函数内部执行时抛出警告

ghhkc1vu  于 2023-08-02  发布在  Java
关注(0)|答案(1)|浏览(95)

我试图DRY一个JavaScript文件,使几 AJAX 调用。我有一个函数,它进行 AJAX 调用,返回一个包含其他ajax调用所需细节的对象。

const makeCall = (url, type, data, done) => {
    $.ajax({
            url: url,
            type: type,
            dataType: "json",
            data: data,
        })
        .done(done)
        .fail(function(error) {
            console.log(error);
        });
};

const country = await $.ajax({
        url: "libs/php/opencage.php",
        type: "GET",
        dataType: "json",

        data: {
            LAT: x.coords.latitude,
            LNG: x.coords.longitude,
        },
    })
    .done(function(result) {
        if (result.status.name == "ok") {
            //populate the detail object with responses from opencage needed to communicate with other apis
            detail.lat = x.coords.latitude;
            detail.long = x.coords.longitude;
            detail.continent = result.data.results[0].components.continent;
            detail.countryName = result.data.results[0].components.country;
            detail.countryCode = result.data.results[0].components.country_code;

            let code = result.data.results[0].components.country_code;
            //set the select to user country
            console.log(code);
            $("#countrySelect").val(code.toUpperCase());
        }
    })
    .fail(function(error) {
        // your error code

        console.log(error);
    });

//save needed part of detail object for easy access
let latitude = detail.lat;
let longitude = detail.long;
let countryName = noSpace(detail.countryName);
let countryCode = detail.countryCode;
let continent = detail.continent;

//makecall to retrieve geojson feature details for selected country.
makeCall(
    "libs/php/retrieveCountry.php",
    "GET", {
        code: countryCode.toUpperCase()
    },
    function(r) {
        //add the geojson object to the map
        L.geoJSON(r).addTo(map);
    }
);

字符串
这个很好用。为了干燥代码,我使用makeCall函数进行了等待 AJAX 调用。会发生的情况是,对retrieveCountry.php的第二个makeCall没有执行,因为gejson特性从未添加到Map中。我也得到一个警告:'await'对这个运算式的型别没有任何影响。ts(80007)

const country = await makeCall(
    "libs/php/opencage.php",
    "GET", {
        LAT: x.coords.latitude,
        LNG: x.coords.longitude,
    },
    function(result) {
        if (result.status.name == "ok") {
            //populate the detail object with responses from opencage needed to communicate with other apis
            detail.lat = x.coords.latitude;
            detail.long = x.coords.longitude;
            detail.continent = result.data.results[0].components.continent;
            detail.countryName = result.data.results[0].components.country;
            detail.countryCode = result.data.results[0].components.country_code;

            let code = result.data.results[0].components.country_code;
            //set the select to user country
            console.log(code);
            $("#countrySelect").val(code.toUpperCase());
            return detail;
        }
    }
);

//save needed part of detail object for easy access
let latitude = detail.lat;
let longitude = detail.long;
let countryName = noSpace(detail.countryName);
let countryCode = detail.countryCode;
let continent = detail.continent;

//makecall to retrieve geojson feature details for selected country. This part is never implemented as this feature is not added to the map.
makeCall(
    "libs/php/retrieveCountry.php",
    "GET", {
        code: countryCode.toUpperCase()
    },
    function(r) {
        //add the geojson object to the map
        L.geoJSON(r).addTo(map);
    }
);


拜托,有什么不对吗?另外值得添加的是,整个代码都在一个异步函数中,并且detail对象的作用域是本地的,即该异步函数

jv4diomz

jv4diomz1#

没有任何东西等待 AJAX 操作,警告是关于原因的线索。具体来说,它告诉你await在这里什么也不做:

await makeCall(...)

字符串
这是因为makeCall不可等待。它不是async,它不返回任何东西:

const makeCall = (url, type, data, done) => {
  $.ajax(...);
};


由于$.ajax()操作 * 是 * 可等待的,因此您的意图似乎是返回:

const makeCall = (url, type, data, done) => {
  return $.ajax(...);
};


这将返回来自$.ajax()本身的awaitable(“then-able”)结果,然后消费代码可以await(或跟随.then())。

相关问题