javascript - redux如何在ajax完成后打开一个新窗口

Question

这是我的问题:

我在表单上有一个保存按钮。单击保存按钮时，它应该通过 ajax 发送表单数据。当 ajax 调用成功时，应该会打开一个新窗口。

我遇到的问题是这样的(我正在使用 React + Redux):

//inside the component class
handleSubmit = (e) => {
    this.props.dispatch( // calls ajax )
}


//inside the ajax action
dispatch => {
    fetch(...).then(response => {
        if (res.status >= 200 && res.status < 300) {
            window.open(...)
        }
    })
}

将 window.open() 放在 ajax 调用中的问题在于，新窗口将被视为弹出窗口，会被 chrome 和 FF 阻止。

我认为我应该将 window.open() 放在 handleSubmit 中以防止浏览器阻止它。但是如何确定 dispatch 是否已在 handleSubmit 中成功完成？还是有任何其他地方我可以调用 window.open() 而不会被阻止？

Answer 1

调度另一个触发 window.open 的操作一旦 promise 命中 .then()，AJAX 请求就完成了，因为 promise 现在已解决。

function openWindow(someData) {
    const url = someData.url;
    window.open(url);
    return { type: 'SOME_ACTION_TO_TAKE' };
}

export function someAction() {
  let endpoint = 'http://localhost:8000/myEndpoint/';
  return dispatch => {
    return Axios.post(endpoint)
      .then(response => response.data)
      .then(json => dispatch(openWindow(json)))
      .catch((err) => { //Do whatever to error here }); 
  };
}