Question

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

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

我的getContacts（）返回一个应为此函数结果的承诺：

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。在加载应用程序之前，我正在从数据库中获取应用程序的某种初始状态。我应该移动这段代码并对其进行大量清理，但是我试图进行快速而肮脏的测试并使其运行。我收到了编译器错误：

SyntaxError: \contacts\client\index.js: Can not use keyword 'await' outside an async function

包含等待的我的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);
})();

Answer 2

您的假设是正确的，尝试使用getContacts()调用异步await函数是代码问题的一部分。为了调用类似await getContacts(){}的函数，您需要将该代码包装在一个异步函数中，该异步函数的定义如下：

async function wrapperFunction() {
    const contacts = await getContacts()
    console.log('body: ')
    console.log(contacts)
}

此外，如果您要执行此功能并添加一些错误处理逻辑，则可以执行以下操作：

wrapperFunction().catch((error) => {
    console.log(error)
})

contacts变量也将成为您的初始状态，并传递给Redux存储区createStore()函数调用。

可以将两者混合使用，因为它们都是用于处理异步逻辑的语法，但是您只需要正确组合两者的用法即可。我建议通读Mozilla documentation的异步函数，以更好地了解如何使用异步/等待以及如何将这种约定与Promise语法一起使用。

Answer 3

如果不在异步函数声明中，则不能使用await。

也许这可以工作：

const initialState = async () => {
  try {
    await getContacts();
  } catch (err) {
    console.log(err)
  }
}
console.log('initial state: ');
console.log(initialState);

您错过了异步/等待与.then（）混合的要点

那么您就不需要了，因为等待将返回已解决的承诺。

分配变量时如何使用异步/等待？

3 个答案: