gadicc / node-yahoo-finance2

Unofficial API for Yahoo Finance
https://www.npmjs.com/package/yahoo-finance2
MIT License
370 stars 60 forks source link

Cannot use keyword 'await' outside an async function #357

Open windowshopr opened 2 years ago

windowshopr commented 2 years ago

Bug Report

Describe the bug

Trying to use this API on a VUE.JS page, and getting the error Module parse failed: Cannot use keyword 'await' outside an async function

Minimal Reproduction

My Trading.vue code looks like this:

<template>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>

        <div>
            <trading-vue :data="this.$data"></trading-vue>
            <button type="button" class="btn btn-success">Buy</button>
        </div>
    </body>
</html>

</template>
<script>

    // import syntax (recommended)
    import yahooFinance from 'yahoo-finance2';
    import TradingVue from 'trading-vue-js'

    const query = 'SPY';
    const queryOptions = { period1: '2021-01-01', /* ... */ };
    const result = await yahooFinance.historical(query, queryOptions);
    console.log(result)

export default {
    name: 'app',
    components: { TradingVue },
    data() {
        return {
            ohlcv: [
                [ 1551128400000, 33,  37.1, 14,  14,  196 ],
                [ 1551132000000, 13.7, 30, 6.6,  30,  206 ],
                [ 1551135600000, 29.9, 33, 21.3, 21.8, 74 ],
                [ 1551139200000, 21.7, 25.9, 18, 24,  140 ],
                [ 1551142800000, 24.1, 24.1, 24, 24.1, 29 ],
            ]
        }
    }
}

</script>

I plan on replacing the dummy data with the results I get back from the API.

Environment

Browser or Node: Node version (if applicable): v14.17.0 Npm version: npm@8.1.4 Browser verion (if applicable): Latest Chrome Library version (e.g. 1.10.1): Latest

Additional Context

I tried wrapping the call in an async function that looked like this:

const result = (async () => {await yahooFinance.historical(query, queryOptions)});

...but the result that was logged was just a promise. I'm likely not using this correctly as I'm a bit of a newbie to Vue, but would like to figure it out. Thanks!

gadicc commented 2 years ago

hey @windowshopr, you may want to read up a bit more about promises and async functions, they're super useful. I'm not so familiar with Vue (or trading-vue-js), but assuming they support async functions, I'd suggest to:

export default {
    name: 'app',
    components: { TradingVue },
    // make this an async function
    async data() {
      // move the retrieve code here, i.e.
      const query = 'SPY';
      const queryOptions = { period1: '2021-01-01', /* ... */ };
      const result = await yahooFinance.historical(query, queryOptions);
      console.log(result)

      // asuming the above works, you could probably just
      return result.map(row => ([ row.date.getTime(), row.open, row.high, row.low, row.close, row.volume ]);
    }
}

I made some assumptions here about vue, I don't use vue, so can't be sure this will work or is the recommended way to use async functions in vue.

Will this be run server side or client side? Using yahoo-finance in a web browser is possible but very complicated and we can't help with that.