使用Jquery.ajax()时,.catch()不能出错.然后()

Question

我正在从JQuery中获取许多API,并缓存每个API的结果,以便可以在页面中多次重复使用数据,以呈现不同格式的一些仪表板小部件.

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

但是,我无法弄清楚如何.catch使用该JQuery.ajax()功能.看完这里,这里,这里,这里和其他十几个,我到目前为止,但总是得到相同的控制台错误:

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

Answer 1

使用.fail()您的第一个链接描述这里

取决于您的jQ版本

“弃用通知：从jQuery 3.0开始，jqXHR.success（），jqXHR.error（）和jqXHR.complete（）回调已删除。您可以使用jqXHR.done（），jqXHR.fail（）和jqXHR.always （）代替。”

编辑：您的错误回调应该接受3个参数，所以这样

function(jqXHR,textStatus,errorThrown ){}

Answer 2

JQuery没有返回典型的承诺,$.Deferred在这种情况下:

• http://api.jquery.com/jquery.ajax/
• http://api.jquery.com/category/deferred-object/

更多关于这一点,答案: 延迟与承诺