时间戳

首页 > 解决方案 > JavaScript async、await、Promise、bug 意外令牌

javascript - JavaScript async、await、Promise、bug 意外令牌

问题描述

需要等到函数 getFile() 结束。我在其他函数中调用此异步函数。在“异步函数 getFile()”中有错误：“意外的令牌。预期有构造函数、方法、访问器或属性。”

import { LightningElement } from 'lwc';

export default class ShoppingCart extends LightningElement {

  async function getFile() {  // <= here is an error: "Unexpected token. A constructor, method, accessor, or property was expected."
    let myPromise = new Promise(function(myResolve, myReject) {
      //let req = new XMLHttpRequest();
      //req.open('GET', "mycar.html");
      //req.onload = function() {
      //  if (req.status == 200) {myResolve(req.response);}
      //  else {myResolve("File not Found");}
      //};
      //req.send();
    });
    console.log(await myPromise);
  }

  handlePlaceOrder() {
    getFile();
  }

在这个例子中没问题。我有什么错？是否可以在非异步函数中调用异步函数？

我也尝试了this的建议。要先使用 Promise，然后使用 async，但会出现相同的错误：

import { LightningElement } from 'lwc';

export default class ShoppingCart extends LightningElement {

  function getFile() {  // <= here is an error: "Unexpected token. A constructor, method, accessor, or property was expected."
    let myPromise = new Promise(async function(myResolve, myReject) {
      //let req = new XMLHttpRequest();
      //req.open('GET', "mycar.html");
      //req.onload = function() {
      //  if (req.status == 200) {myResolve(req.response);}
      //  else {myResolve("File not Found");}
      //};
      //req.send();
    });
    console.log(await myPromise);
  }

  handlePlaceOrder() {
    getFile();
  }

我使用 VSCode。

标签： javascriptasynchronousasync-await

解决方案

类有方法，所以function在声明类方法时需要去掉关键字：

class ShoppingCart extends LightningElement {
  getFile() { ... }
  handlePlaceOrder() { ... }
}

此外，您如何调用getFileinside也存在问题handlePlaceOrder。解决问题后，getFile成为类方法，您需要将其称为this.getFile()，因此您的固定类应如下所示：

class ShoppingCard extends LightningElement {
  getFile() {
    return new Promise(
      function(resolve, reject) {
        let req = new XMLHttpRequest();
        req.open("GET", "mycar.html");
        req.onload = function() {
          if (req.status == 200) {
            resolve(req.response);
          } else {
            reject("File not found");
          }
        }
        req.send();
      }
    )
  }
}

然后，由于getFile是返回 a 的异步调用Promise，因此您需要在handlePlaceOrder方法中这样处理它：

class ShoppingCart extends LightningElement {
  getFile() {
    return new Promise(...);
  }

  handlePlaceOrder() {
    this.getFile()
      .then(function(result) {
        // do whatever
      })
      .catch(function(error) {
        // handle errors appropriately
      })
  }
}

或者，如果它使您更容易使用s，则创建您的handlePlaceOrder函数：asyncPromise

class ShoppingCart extends LightningElement {
  getFile() {
    return new Promise(...);
  }

  async handlePlaceOrder() {
    try {
      let file = await this.getFile();
      // do whatever
    } catch (error) {
      // handle errors appropriately
    }
  }
}

推荐阅读