Trying to retrieve result of async/await

Question

I'm attempting to retrieve the results from a promise with an async / await but and receiving the following error:

544:1 Uncaught Error: Module build failed: SyntaxError: await is a reserved word (30:23)

Here's my code:

import React from 'react';
import Header from './Header';
import Feed from './Feed';
import _ from 'lodash';
const Cosmic = require('cosmicjs')();

export default class WhereSheGoes extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            destinations: '',
            posts: '',
            globals: '',
        }
    }
    render() {
        const bucket = Cosmic.bucket({
            slug: 'where-she-goes',
            read_key: '',
            write_key: ''
        });
        const retrieveBucket = async () => {
            try {
                let result = bucket.getBucket()
                return result
            } catch (err) {
                console.log(err)
            }
        }
        const result = await retrieveBucket()
        console.log(result)
        this.setState (() => {
            return {
                destinations: _.filter(result.bucket.objects, {type_slug: 'destinations'}),
                posts: _.filter(result.bucket.objects, {type_slug: 'posts'}),
                globals: _.filter(result.bucket.objects, {type_slug: 'globals'})
            }
        });
        return (
            <div>
                <Header 
                    destinations={this.state.destinations}
                    posts={this.state.posts}
                    globals={this.state.globals}
                />
                <Feed
                    posts={this.state.posts}
                    destinations={this.state.destinations}
                />
            </div>
        );
    }
}

I can get the above to run but only if I return the result and set the state within the actual async function. How do I return the result of a promise outside of that function?

Thanks!

Possible duplicate of [How to return values from async functions using async-await from function?](https://stackoverflow.com/questions/49938266/how-to-return-values-from-async-functions-using-async-await-from-function) — Rubén S. García, May 25 '19 at 15:39
Well I believe you can use `await` only in `async` function... — l2ysho, May 25 '19 at 15:47

score 1 · Accepted Answer · answered May 25 '19 at 15:50

await can only be used inside of functions which are declared with async. So you should use await inside this function to get your data and set the state. Also your code is not optimal, because it will try to receive the data on every rerender of the component. Better structure your class and use the lifecycle methods like componentDidMount to get the data and store it to the state. Afterwards in render just use the state to display it

export default class WhereSheGoes extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            destinations: '',
            posts: '',
            globals: '',
        }
    }

    componentDidMount() {
        retrieveBucket();
    }

    retrieveBucket = async () => {
        const bucket = Cosmic.bucket({
            slug: 'where-she-goes',
            read_key: '',
            write_key: ''
        });
       try {
          let result = await bucket.getBucket()
          console.log(result)
          this.setState ({
                destinations: _.filter(result.bucket.objects, {type_slug: 'destinations'}),
                posts: _.filter(result.bucket.objects, {type_slug: 'posts'}),
                globals: _.filter(result.bucket.objects, {type_slug: 'globals'})
            });
       } catch (err) {
            console.log(err)
       }
    }

    render() {
        return (
            <div>
                <Header 
                    destinations={this.state.destinations}
                    posts={this.state.posts}
                    globals={this.state.globals}
                />
                <Feed
                    posts={this.state.posts}
                    destinations={this.state.destinations}
                />
            </div>
        );
    }
}```

score 0 · Answer 2 · answered May 25 '19 at 15:49

You can only use await in an async function.

You can also use .then

import React from 'react'; import Header from './Header'; import Feed from './Feed'; import _ from 'lodash'; const Cosmic = require('cosmicjs')();

export default class WhereSheGoes extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            destinations: '',
            posts: '',
            globals: '',
        }
    }

    retriveBucket = () => {
      const bucket = Cosmic.bucket({
          slug: 'where-she-goes',
          read_key: '',
          write_key: ''
      });

      try {
        bucket.getBucket().then(result => {
          this.setState (() => {
              return {
                  destinations: _.filter(result.bucket.objects, {type_slug: 'destinations'}),
                  posts: _.filter(result.bucket.objects, {type_slug: 'posts'}),
                  globals: _.filter(result.bucket.objects, {type_slug: 'globals'})
              }
          });
        });
      } catch (err) {
          console.log(err)
      }
    }

    render() {
        this.retriveBucket();

        return (
            <div>
                <Header 
                    destinations={this.state.destinations}
                    posts={this.state.posts}
                    globals={this.state.globals}
                />
                <Feed
                    posts={this.state.posts}
                    destinations={this.state.destinations}
                />
            </div>
        );
    }
}

Trying to retrieve result of async/await

2 Answers2