将promise转换为await调用时，"await is a reserved word“

Question

我有以下代码可以正常工作：

// api.js
export default {
    async readAsync (resource) {
        await new Promise(r => setTimeout(r, 400));
        return data[resource];
    },
}

// ProductList.vue
import api from '@/services/api'

[...]

  methods: {
    fetch () {
      this.loading = true;
      api.readAsync('products').then(data => {
        this.products = data;
        this.loading = false;
      });
    }
  }

[...]

我想用await去掉这个承诺，就像这样：

  methods: {
    fetch () {
      this.loading = true;
      this.products = await api.readAsync('products');;
      this.loading = false;
    }
  }

但我得到以下错误：

Module build failed (from ./node_modules/babel-loader/lib/index.js): 
SyntaxError: D:\devel\apps\vue-tests\cli-test\src\components\ProductList.vue: await is a reserved word (59:22)
  57 | this.loading = true;
  58 | 
> 59 | this.products = await api.readAsync('products');; 
     |                 ^ 
  60 | this.loading = false;

你知道我会做错什么吗？

Answer 1

您需要将fetch方法声明为async，才能使用await关键字：

async fetch () {
  this.loading = true;
  this.products = await api.readAsync('products');;
  this.loading = false;
}