javascript - 如何在分配变量时使用 async/await？

Question

我有一个基于异步函数结果设置的变量，该变量是initialState

const initialState = await getContacts()
  .then((body) => {
    console.log('body: ');
    console.log(body);
    return body;
  }).catch(err => console.log(err));

我的 getContacts() 返回一个 promise ，它应该是此函数的结果:

export async function getContacts() {
  let data = fetch('/api/contacts').then((data) => {
    console.log(data);
    return data.json();
  }).catch(err => console.log(err));

  return data;
}

我认为我的部分问题可能是我试图从普通的 javascript 文件中调用它。它实际上是我的 React 应用程序的 index.js。在加载应用程序之前，我正在从数据库中获取应用程序的某种初始状态。我应该移动这段代码并对其进行一些清理，但我试图启动并运行一个快速而肮脏的测试。我收到编译器错误:

语法错误:\contacts\client\index.js:无法在异步函数之外使用关键字“await”

我的包含等待的index.js是这样的:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import App from './components/app';
import reducers from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
import { getContacts } from './server/api';

const initialState = await getContacts()
  .then((body) => {
    console.log('body: ');
    console.log(body);
    return body;
  }).catch(err => console.log(err));

console.log('initial state: ');
console.log(initialState);

const composeEnhancers = composeWithDevTools({});
ReactDOM.render(
  <Provider store={ createStore(reducers, initialState, composeEnhancers(
  )) }>
   <App />
  </Provider>
, document.querySelector('.container'));

Answer 1

将对 getContacts() 的调用包装在异步函数中 - 您也不希望将 async/await 与 .then(),

(async function() {
  const contacts = await getContacts();
  console.log('contacts', contacts);
})();