Как я могу использовать async / await при назначении переменной? - PullRequest
Новая
       13

Как я могу использовать async / await при назначении переменной?

0 голосов
/ 05 апреля 2019

У меня есть переменная, которую я устанавливаю на основе результата асинхронной функции, переменная initialState

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

My 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.На самом деле это index.js моего приложения React.Я загружаю какое-то начальное состояние моего приложения из БД перед тем, как загрузить приложение.Я должен немного переместить этот код и очистить его, но я пытался запустить быстрый и грязный тест.Я получаю сообщение об ошибке компилятора:

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

Ответы [ 3 ]

1 голос
/ 05 апреля 2019

Обернуть вызов getContacts() в асинхронную функцию - вы также не хотите смешивать async/await с .then(), 

(async function() {
  const contacts = await getContacts();
  console.log('contacts', contacts);
})();
0 голосов
/ 05 апреля 2019

Вы правы, полагая, что попытка вызвать асинхронную функцию 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 store createStore().

ItМожно смешать два, так как они оба являются синтаксисами для обработки асинхронной логики, но вам просто нужно правильно собрать их использование.Я предлагаю прочитать документацию Mozilla об асинхронных функциях, чтобы получить представление о том, как использовать async / await, а также о том, как можно использовать это соглашение с синтаксисом Promise.

0 голосов
/ 05 апреля 2019

Вы не можете использовать await, если не в объявлении асинхронной функции.

Возможно, это может сработать: 

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

Вам не хватает точки асинхронности / ожидания, смешивая ее с .then ()

Вам тогда не нужно, потому что ожидание возвращает выполненное обещание.

...