Javascript 从axios返回数据而不是承诺

我用axios对我的json文件进行了一个伪api调用。我从函数中得到了一个承诺，我可以从中获取数据。但我不想那样。我想从函数接收数据

我现在的代码：products.js

export default {
    async getAllProducts(axios) {
        const response = await axios.get('fakedb.json');
        return response.data;
    }
}

导出默认值{ getAllProductsaxios{ 返回axios.get'fakedb.json'。然后响应=>{ 返回响应数据； }; } } 视图文件：product.vue文件

从“~/data/controllers/product”导入productController； 导出默认值{ 资料{ 返回{ 产品：productController.getAllProductsthis.$axios.thenres=>this.products=res } }, } 但这不是我想要实现的。 我要实现的是product.vue文件中的以下代码：

import productController from '~/data/controllers/product';
export default {
  data() {
    return {
      products: productController.getAllProducts(this.$axios)
    }
  },
}

我希望在不必处理视图文件中的承诺的情况下接收数据。如何在products.js文件中返回我的数据

如果我像这样从products.js文件中执行正常返回，它可以正常工作：

export default {
    getAllProducts(axios) {
        return [
          {
              "name": "Product1",
               "price": 9.75
          },
          {
              "name": "Product2",
              "price": 10.75
          }
        ]

    }
}

---

但我想让它与axios配套，你不能。函数会立即返回，如果您不希望得到承诺，那么它将不会返回任何有意义的内容，因为加载还没有开始。这是承诺首先要解决的问题。不过，首先对数据进行异步调用是一种不好的模式。请改用此模式：

data() {
  return {
    products: null
  }
},
methods: {
  getAllProducts() {
    return axios.get('fakedb.json').then(response => {
      this.products = response.data;
    });
  }
},
created() {
  this.getAllProducts();
}

异步调用被抽象到所创建的钩子中，解析后将相应地设置数据

---

你不能。函数会立即返回，如果您不希望得到承诺，那么它将不会返回任何有意义的内容，因为加载还没有开始。这是承诺首先要解决的问题。不过，首先对数据进行异步调用是一种不好的模式。请改用此模式：

data() {
  return {
    products: null
  }
},
methods: {
  getAllProducts() {
    return axios.get('fakedb.json').then(response => {
      this.products = response.data;
    });
  }
},
created() {
  this.getAllProducts();
}

异步调用被抽象到所创建的钩子中，解析后将相应地设置数据

---

因为您有一个.vue文件，所以我假设这是一个单页vue组件，对吗？因此，您可以使用vue cli或webpack。因此，我假设您可以使用异步/等待语法

从axios检索数据是异步的，因为您基本上不知道通过网络检索数据需要多长时间。这种情况就是async/await的用途

因此，使函数异步：

products.js

export default {
    async getAllProducts(axios) {
        const response = await axios.get('fakedb.json');
        return response.data;
    }
}

product.vue：

import productController from '~/data/controllers/product';
export default {
  data() {
    return {
      products: [],
    };
  },
  async mounted: {
    this.products = await productController.getAllProducts(this.$axios);
  }
}

---

我认为您不能使数据函数异步，因此返回一个空数据对象（我假设它是一个数组），然后使用挂载的钩子检索数据。

由于您有一个.vue文件，我假设这是一个单页vue组件，对吗？因此，您可以使用vue cli或webpack。因此，我假设您可以使用异步/等待语法

从axios检索数据是异步的，因为您基本上不知道通过网络检索数据需要多长时间。这种情况就是async/await的用途

因此，使函数异步：

products.js

export default {
    async getAllProducts(axios) {
        const response = await axios.get('fakedb.json');
        return response.data;
    }
}

product.vue：

import productController from '~/data/controllers/product';
export default {
  data() {
    return {
      products: [],
    };
  },
  async mounted: {
    this.products = await productController.getAllProducts(this.$axios);
  }
}

---

我认为您不能使数据函数异步，因此返回一个空数据对象（我假设它是一个数组），然后使用挂载的钩子检索数据。

谢谢。将mu控制器功能放在安装的帮助中我想使用模型/控制器系统来明确我的vue项目，这对我的vue项目很有帮助。谢谢。将mu控制器功能放在安装的帮助中我想使用模型/控制器系统来明确我的vue项目，这对我的vue项目很有帮助。谢谢你的帮助，但因为我想使用控制器/模型系统来使我的项目更易于管理，所以我不想对我的所有控制器方法使用方法功能。上面的答案是我想要实现的，这里所有的方法都是将异步调用的实际逻辑放在自己的位置上。它使MVVM范式的语法更加有效，而不是更少。此外，在需要重新加载数据的情况下，您可以轻松地再次调用该函数，而从您接受的答案来看，这是无法做到的。另外，没有理由使用mounted而不是created。是的，你的帮助很好，这是正确的。但这并不是我问的问题，在我的情况下我不想这样。你将获得投票权。但是在这种情况下，另一种解决方案帮助最大。谢谢你的帮助，但是因为我想使用控制器/模型系统使我的项目更易于管理，所以我不想对我的所有控制器方法使用methods函数。上面的答案是我想要实现的，这里所有的方法都是将异步调用的实际逻辑放在自己的位置上。它使MVVM范式的语法更加有效，而不是更少。此外，在需要重新加载数据的情况下，您可以轻松地再次调用该函数，而从您接受的答案来看，这是无法做到的。另外，没有理由使用mounted而不是created。是的，你的帮助很好，这是正确的。日分 这不是我问的问题，在我的情况下我不想这样。你将获得投票权。但在这种情况下，另一种解决方案帮助最大。