为什么外部 javascript 类方法返回承诺而内部 vue 组件方法不返回?

时间:2021-05-03 15:25:05

标签: javascript vue.js promise

我想从 vue 组件方法中提取一些逻辑并将它们放在一个单独的类中。

单独的文件包含将通过 axios 调用 API 的方法。

当我在 vue 组件方法中执行此操作时,我可以获得有效结果,但是当我通过调用外部类方法执行此操作时,我得到了一个承诺。

如何避免这种行为?

以下是代码片段:

vue 组件方法方法

<script>
const axios = require("axios");
export default {

  methods: {
      
    onChangeAmount(value1, value2, event) {
        
      const value3 = event.target.value;
      const msg = `my_message ?`;
      const myObject = {  'field': value1, 'items': value2, 'day': value3 };
      const answer = confirm(msg);
        
      if (answer) {
        axios
          .put(
            "http://localhost:8000/api/endpoint/" + value1, myObject)
          .then(result => {
            alert(result); //shows valid data
          })
          .catch((error) => {
            if (error.request) {
              const response = JSON.parse(error.request.response);
                alert(response); //shows valid error data
            } else {
              alert(error.message); //shows valid error data
            }
          });
      }
    },
  },
};
</script>

外部类方法

<script>

export default {

  methods: {
      
    onChangeAmount(value1, value2, event) {
        
      const value3 = event.target.value;
      const msg = `my_message ?`;
      const stepState = {  'field': value1, 'items': value2, 'day': value3 };
      const answer = confirm(msg);
        
      if (answer) {
            // calling an outside class method
            const output = this.OutSideClass.onChangeAmount((value1, value2, event);
            alert(output); //it shows a Promise
      }
    },
  },
};
</script>

0 个答案:

没有答案