在 javascript onclick（或任何）事件上调用异步函数

Question

我正在 js 中尝试 es6 和 async/await。

我所做的是：

html代码

  <input type="button" onclick="javascript:examplefunction()" />

单独的 example.js 文件中的 js 代码，该文件已经包含在 html 中。

  const somefunction = (...args) => {
    let result =  feedReducer(args);
    // do something
  }

它可以正常工作。 但是由于我必须在 examplefunction() 内部使用await来处理其他一些函数，因此我将正常的箭头函数用于异步，如下所示

   const somefunction = async (...args) => {
    let result = await feedReducer(args);
    // do something
  }

现在我得到

未捕获的 SyntaxError：await 仅在异步函数中有效

我被困在这里，我做错了什么？ 我从这里采用了上述语法。 任何建议表示赞赏。 谢谢。

实际功能：

    const preparationManager = async (...args) => {
        console.log(args.length);
        let feed_type = args[0], feed_id = args[1], feed_name = args[2], product_count = args[5];
        let index = args[7] | 0;
        jQuery("#loader").show();
        jQuery.ajax({
            url: 'index.php?option=com_cartproductfeed&task=tranquilizer.formatFeedsToParentChildJson',
            type: 'POST',
            dataType:'json',
            data: {feed_type: feed_type, feed_id:feed_id, feed_name: feed_name, index:index },
            success: function (res) {
                if(res.success === true){
                    if(res.do_repeat === true){
                        args.push(res.index);
                        preparationManager(args[0],args[1],args[2],args[3],args[4],args[5],args[6]);
                    }else{
                        console.log("feedreducer");
                        let result = await feedReducer(args, res);
                        console.log('result',result)
                        console.log("after result")
                    }
                    //window.location.href = base_url + 'index.php/etsy-listings';
                }else{
                    console.log(res);
                }
                jQuery("#loader").hide();
            }
        })
    };

    const feedReducer = async (...args) => {
        jQuery.ajax({
            url: 'index.php?option=com_cartproductfeed&task=tranquilizer.formatFeedsToParentChildJson',
            type: 'POST',
            dataType:'json',
            data: {feed_type: feed_type, feed_id:feed_id, feed_name: feed_name, index:index },
            success: function (res) {
                if(res.success === true){
                    if(res.do_repeat === true){
                        args.push(res.index);
                       let reducerPromise = feedReducer(args[0],args[1],args[2],args[3],args[4],args[5],args[6]);
                       console.log(reducerPromise);
                    }else{
                        //TODO : handle completion of feedreducer
                    }
                    //window.location.href = base_url + 'index.php/etsy-listings';
                }else{
                    console.log(res);
                }
                jQuery("#loader").hide();
            }
        })
    };

Answer 1

嗨 Suz 尝试以下代码，它对我有用。

function feedReducer(args){
    return new Promise((res,rej)=>{
    res(args);
  })
}

const somefunction = async (...args) => {
  let result = await feedReducer(args);
  console.log(result);
  // do something
}

somefunction('hello');

未捕获的 SyntaxError：await 仅在异步函数中有效

您收到的上述错误表明您的 feedReducer 不是异步函数

确保 feedReducer 返回一个 Promise。 祝你好运

Answer 2

用

       document.getElementById("idButton").onclick=async ()=>{
            // await promiseExample();
        };