使用自定义数据动态创建组件

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

它解决了我的问题。

感谢拉兰的建议。

使用自定义数据动态创建组件

Create component on the fly with custom data

mount

timeout

interceptor

vue.js

axios