Question

首先，我不是Vue专家，所以如果我对任何事情都不了解，我感到抱歉

在我的应用中，我需要实现以下功能：每个具有超时的请求都应显示一个弹出窗口，用户可以在其中重新发送该请求。为此，我使用了axios，并创建了一个拦截器来捕获超时请求

export const authenticated = Axios.create({
  timeout: 100,
})

authenticated.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.code === 'ECONNABORTED') {
      //create and show popup
      var ComponentClass = Vue.extend(TimeoutModalDialog)
      var instance = new ComponentClass()
      instance.$mount('#page')
    }
    return Promise.reject(error)
  }
)

在这里，我将请求的所有数据保存在“ error.config”中，因此我想要将该对象发送到新组件（TimeoutModalDialog）。我也想知道是否有更好的方法来创建和显示动态Vue组件。

我希望你能帮助我最好的问候

Answer 1

最后，我实现了此解决方案来解决我的问题：

authenticated.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.code === 'ECONNABORTED') {
      return new Promise((resolve, reject) => {
        var modalDialogId = "timeout-modal-dialog";
        if($('#' + modalDialogId).length){
          instance.$children[0].loadingComplete = true;
        } else {
          var ComponentClass = Vue.extend(TimeoutModalDialog);
          instance = new ComponentClass({
            propsData: {
              retryFunction: function () {
                instance.$children[0].loadingComplete = false;
                authenticated.request(error.config).then((response) => {
                  instance.$children[0].loadingComplete = true;
                  $("#" + modalDialogId).modal("close");
                  resolve(response);
                }, (error) => {
                  instance.$children[0].loadingComplete = true;
                  reject(error);
                })
              },
              cancelFunction: function () {
                instance.$children[0].loadingComplete = true;
                $("#" + modalDialogId).modal("close");
                reject(error);
              },
              dialogId: modalDialogId
            }
          });
          instance.$mount();
          document.getElementById('modalVueGeneric').appendChild(instance.$el);
        }
      });
    } else {
      return Promise.reject(error);
    }
  }
);

它解决了我的问题。

感谢拉兰的建议。

使用自定义数据即时创建组件

1 个答案: