Vue 从承诺中返回

Posted 2023-02-22

【中文标题】Vue 从承诺中返回

【英文标题】：Vue returning from a promise

【发布时间】：2019-05-11 05:19:53

【问题描述】：

我正在尝试从这个调度中返回一些值

 this.$store.dispatch('setValue', this.Value)
      .then(response => 
        console.log(response)
);

在我的 vuex 操作中，我有

.catch(error => 
              if (error.response.status === 412) 
                return "some message"
     
);

如何将错误传递回进行 vuex 调度的 .vue 文件？

【问题讨论】：

在 vuex 动作中使用 throw 错误。 ).catch((error) => throw error)

【参考方案1】：

我认为正确的做法是在您的store 中有一个status 属性。

您的状态对象将由error, success, loading 组成。

所以如果你的动作抛出异常，你可以这样处理：

catch (error) 
    commit("error", `Some Message`);

您的错误突变如下所示：

error(state, payload) 
    state.status.success = false;
    state.status.loading = false;
    state.status.error = payload || false;

您的模板只会在 store.state.status 上收听

<div v-if="store.state.status.error">store.state.status.error</div>

我可能是错的，但在我个人看来，我认为使用操作来返回东西是错误的。您使用商店，所以不妨尽可能地利用它。

其他额外的好处是，如果 api 正在加载或某些事情成功，您可以向 .vue 文件指示。

【讨论】：

感谢 Jeremy 一个非常好的解决方案，我选择了其他看起来更容易的方法。

好的，太棒了，我在我的所有项目中都使用了这种模式，到目前为止效果很好。

【参考方案2】：

我最终做的很简单。我将捕获物与我的调度联系起来：

this.$store.dispatch('setValue', this.Value)
      .then(response => 
        console.log(response)
)
.catch(error => 
              if (error.response.status === 412) 
                return "some message"
     
);

然后我从操作中返回了 Axios 调用：

return axios(
   method: 'post',
    url: `/mypath,
    data: mydata,
    json: true,
)

这意味着我可以在我想触发操作的地方处理返回的数据/错误。

【参考方案3】：

商店：

.catch(error => 
  if (error.response.status === 412) 
      throw error
  
);

带有异步方法的Vue元素：

try
    let response = await this.$store.dispatch('setValue', this.Value)
 catch(error) 
    console.log(error)
);

【讨论】：

不错的解决方案，我可以看到这种情况会派上用场。