使用Jquery.ajax()。then()时无法.catch()错误

时间:2018-10-12 10:26:57

标签: javascript jquery ajax promise

我在JQuery中找到了许多API,并缓存了每个API的结果,以便可以在页面中多次重复使用数据以呈现不同格式的某些仪表板小部件。

问题是,如果API返回500错误的状态代码,我不想尝试绘制小部件,而是以友好的方式捕获错误。

但是,我无法弄清楚.catch如何与JQuery.ajax()函数一起工作。读完herehereherehere和其他十几个词之后,到目前为止,我仍然遇到相同的控制台错误:

  

TypeError:LoadDataFromApi(...)。then(...)。catch不是函数

我试图注释该代码以解释我在每个阶段想要做的事情。请有人解释为什么整个.catch都不适合我。

// Cache object to save API data for re-use
var requestCache = {};

// Get API data and save to cache 
function LoadDataFromApi(apiUrl) {
    if (!requestCache[apiUrl]) {
        var result = $.ajax({
            type: 'GET',
            url: apiUrl,
            dataType: "json",
            statusCode: {
                500: function (xhr) {
                    var err = JSON.parse(xhr.responseText);
                    console.log('Message:' + err.Message);
                    // throw err.Message; // removed because this was always an "uncaught exception", even if used within try/catch
                },
                200: function (xhr) {
                    // Do nothing here - put result into cache regardless of status code
                }
            }
        });
        requestCache[apiUrl] = result; // save the JSON data into cache
    }
    return requestCache[apiUrl];
}

// Called by page on load
function LoadJsonData() {
    LoadDataFromApi('/api/GetFoo?Row=10')
        .then(function (data) {
            RenderChart(data, 'Removed for legibility');
        })
        .catch(function (error) {
            console.log('Promise catch: ' + error);
        });
    LoadDataFromApi('/api/GetFoo?Row=10') // this returns cached data because API has already been hit
        .then(function (data) {
            RenderChart(data, 'Removed for legibility');
        })
        .catch(function (error) {
            console.log('Promise catch: ' + error);
        });
    LoadDataFromApi('/api/GetBar')
        .then(function (data) {
            RenderChart(data, 'Removed for legibility');
        })
        .catch(function (error) {
            console.log('Promise catch: ' + error);
        });
}

2 个答案:

答案 0 :(得分:5)

JQuery不会返回典型的Promise,在这种情况下为$.Deferred

此处提供了更多有关答案的信息: Deferred versus promise

答案 1 :(得分:4)

按照第一个链接here所述使用var get_number = obj.Price.Itog; var get_сurrency = obj.Currency.symbol; var final_currency = ''; function declOfNum(get_number, titles) { return titles[(get_number%10==1 && get_number%100!=11) ? 0 : get_number%10>=2 && get_number%10<=4 && (get_number%100<10 || get_number%100>=20) ? 1 : 2]; //v3 } if (get_сurrency == 'грн') { final_currency = declOfNum(get_number, ['грИвна', 'грИвны', 'грИвен']); } else if (get_сurrency == 'сом') { final_currency = declOfNum(get_number, ['сом', 'сома', 'сомов']); } else if (get_сurrency == 'тг') { final_currency = 'тенгЕ'; } else { final_currency = declOfNum(get_number, ['рУбль', 'рублЯ', 'рублЕй']); } // CALL THE FUNCTION HERE GenTextPriceHour(obj)

取决于您的jQ版本

  

”弃用通知:jqXHR.success(),jqXHR.error()和   从jQuery 3.0开始删除了jqXHR.complete()回调。您可以使用   而不是jqXHR.done(),jqXHR.fail()和jqXHR.always()。“

编辑: 您的错误回调应接受3个参数,因此应如此

.fail()