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

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

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

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

});

}