飞行前选项请求延迟了我的删除

Question

我正在delete一个对象，然后立即检索可用对象的列表，并且遇到了一个种族问题。

DELETE请求受 CORS 飞行前OPTIONS请求的约束，而GET请求则不受约束。 这意味着我的意图

• DELETE /things/21
• GET /things/

成为：

• OPTIONS /things/21
• GET /things
• DELETE /things/21

GET的结果包括对象 21。

我想避免添加人为的延迟;有没有其他方法可以确保DELETE首先发生？

(请求是从我的反应应用程序的完全不同的组件触发的)

编辑：

我有一个组件Things，它呈现事物的摘要列表，还有一个组件Thing，它呈现一页详细信息。

Thing包括一个Delete按钮，该按钮将触发删除并导航到Things。 通过"触发删除"，我的意思是：触发 ajax DELETE 来/things/21并从我的本地 redux 存储中删除第 21 件事。

Things有一个componentWillMount，它会触发一个GET来检索可用内容的列表，当它们到达时，我的 redux 缩减器将它们全部添加到其存储中。

编辑：示例：

Redux 动作创建者

export const deleteThing = thingId => ({
type: 'DELETE_THING',
payload: thingId
});
export const retrieveThings = () => ({
type: 'FETCH_THINGS'
});

负责 API 请求的"化简器">

export default store => next => action => {
switch (action.type) {
case 'DELETE_THING':
return deleteObj(store.dispatch, action.type, `/things/{action.payload}`, action.payload);
case 'FETCH_THINGS':
return getObj(store.dispatch, action.type, '/things/');
}
}
const getObj = (dispatch, action, url) => {
return sendRequest(dispatch, () => fetch(url)
.then(processResponse(dispatch, action))
.catch(handleError(dispatch, action))
);
};
const deleteObj = (dispatch, action, url, payload) => {
return sendRequest(dispatch, () => fetch(url, {
method: 'DELETE',
headers
})
.then(results => {
if (results.status >= 400) return handleError(dispatch, action)(results);
// DELETE doesn't return anything but reducers want to know what was deleted, so pass the payload
return dispatch({
type: `${action}_SUCCESS`,
payload
});
}) 
.catch(handleError(dispatch, action))
);
}
// Wraps a fetch request, triggering redux events on send/receive (regardless of outcome)
const sendRequest = (dispatch, fn) => {
dispatch({type: 'SENDING_REQUEST'});
const always = () => dispatch({type: 'RECEIVED_RESPONSE'});
return fn().then(always, always);
}

减速机/存储Thing

export default (state = initialState, action) => {
case 'DELETE_THING_SUCCESS': 
return state.deleteIn(['byId'], action.payload);
}

反应组件

class Thing {
render () {
return (
<div>
<h1>{props.thing.id}</h1>
<button onClick={this.props.deleteThing}>Delete</button>
</div>
);
}
deleteThing () {
this.props.triggerActionToSend
// Pretend this is `connect`ed to a redux store
this.props.deleteThing(this.props.id);
// AJAX to delete from server
fetch({
url: '/thing/' + this.props.id,
method: 'delete'
});
// Redirect to main list
this.props.navigate('/things/');
}
}
// Pretend this is a `connect`ed component that receives a `things` prop from a redux store
class Things {
componentWillMount () {
this.props.retrieveThings();
}

render () {
return (
<ul>
{this.props.things.map(x => <li>x.id</li>)}
</ul>
);
}
);
const App = () => (
<div>
<Route path="/things" component={Things} />
<Route path="/thing/:thingId" component={Thing} />
</div>
);

Answer 1

更改导航调用以等待fetch承诺解决。可能应该与从本地存储中删除做同样的事情，但这不是手头的问题

// AJAX to delete from server
fetch({
url: '/thing/' + this.props.id,
method: 'delete'
}).then(_=> this.props.navigate('/things/'));