嘗試檢索異步/等待的結果

Question

我正在嘗試使用async / await從諾言中檢索結果，但是收到以下錯誤：

544：1未捕獲的錯誤：模塊構建失敗：語法錯誤：等待是保留字（30:23）

這是我的代碼：

 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> ); } } 

我可以讓以上代碼運行，但前提是要返回結果並在實際的異步函數中設置狀態。 如何在該函數之外返回Promise的結果？

謝謝！

Answer 1

await只能在用async聲明的函數內部使用。 因此，您應該在此函數內使用await來獲取數據並設置狀態。 同樣，您的代碼也不是最佳的，因為它將嘗試在每次重新呈現組件時接收數據。 更好地構造您的類，並使用諸如componentDidMount類的生命周期方法來獲取數據並將其存儲到狀態。 然后在渲染中只使用狀態顯示它

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>
        );
    }
}```

Answer 2

您只能在異步函數中使用await 。

您也可以使用.then

從'react'導入React； 從'./Header'導入Header； 從“ ./Feed”導入Feed； 從'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>
        );
    }
}