我正在学习 React,以及几乎所有围绕它的必要技术 - 所以我经常被我应该已经知道的事情绊倒。
我在处理异步事件时遇到了错误。我已经在网上搜索过,但没有什么能真正回答我正在寻找的问题。
我目前正在使用 redux 和 redux-promise-middleware 来处理异步操作,如下所示:
export function myFunc() {
return {
type: FETCH_FUNC,
payload: new Promise((resolve, reject) => {
fetch ('some/url/location/from/which/to/fetch')
.then( response => {
if (!response.ok){
throw new Error(response);
}
resolve(response.json());
}).catch(error => {
reject(error);
}),
})
};
}
这里有两件事:首先,代码在没有错误的情况下工作得很好。但是,当我故意在代码中创建错误时,正确的方法正在触发,但最终我的控制台中仍然出现以下错误:
Uncaught (in promise) Error: [object Response]
.catch(...) 块不应该处理这个吗?我错过了什么?我应该得到这个吗?如果是这样,为什么?
其次,我读到将 fetch 包装在新的 Promise 中是一种反模式,并且几乎暗示这可能是导致问题的原因。我遇到的所有示例都以这种方式使用它。什么是替代方案?如何在没有包装器的情况下触发解决/拒绝以调度下一个操作?
任何帮助将不胜感激。感谢网络高手。
-------------编辑1----------------
从官方redux-promise-middleware
github示例中,他们有以下代码:
export default function request(url, options) {
return new Promise((resolve, reject) => {
if (!url) reject(new Error('URL parameter required'));
if (!options) reject(new Error('Options parameter required'));
fetch(url, options)
.then(response => response.json())
.then(response => {
if (response.errors) reject(response.errors);
else resolve(response);
})
.catch(reject);
});
}
中间件的意图似乎是包装fetch
在 a 中new Promise
并捕获任何reject
s。如果有人有一种可行的替代方法来实现这一点redux-promise-middleware
,或者可以详细说明为什么它遵循这种模式,将不胜感激。
-------------编辑2----------------
不确定实现这一点的预期方式是什么,或者如何避免Promise中的 Uncaught 错误。Promise.reject(...)
除非您包含错误处理函数,否则简单地调用会导致未捕获的错误:Promise.reject(...).then(() =>{...}, error => {...})
. 在中间件中包含这个会导致被拒绝的动作永远不会被分派。我已经远离 redux-promise-middleware,直到找到合适的修复和/或实现。