nekoguard
@nekoguard
котер

Вернуть значение из асинхронного метода класса?

Промисы изменили цвет моих волос на седой.
А теперь подробнее.

Имеется реакт-приложение. Работать будем с компонентом App и сервисом. Сервис - отдельный класс, который отвечает за получение и, при необходимости, трансформацию данных.
Есть главные условия: использовать только компоненты-классы, запросы осуществляются с помощью Apollo(GraphQL).

В сервисе есть метод, отвечающий за получение каких-то данных. Метод - асинхронная фунция. Асинхронная функция возвращает промис.

export default class Service {
  constructor() {
    this._client = new ApolloClient({
      uri: 'http://localhost:4000/',
      cache: new InMemoryCache()
    })
  }

  getCategory = async (id) => {
    let result = await this._client.query({
      query: gql`
        query GetCategories {
          categories {
            name
          }
        }`
    }).then((data) => data.data.categories[id].name)

    return result;
  }
}


В компоненте App я импортирую сервис, создаю его экземпляр и хочу использовать значение, которое должен вернуть метод getCategory. Но все мы помним, что метод возвращет промис а не значение, поэтому на экране отображается всеми любимый [object Promise]. А хотелось бы достать значение.

export default class App extends React.Component {
  render() {
    const service = new Service();

    return (
        <Router>
          <div className="app">
            <div className="container">
              <p>{`${service.getCategory(1)}`}</p>
            </div>
          </div>
        </Router>
    );
  }
}


Прекрасно знаю, что для этих целей записывают значение в переменную используя await, но такие штуки никак не могу провернуть в классах. Как всё же поступить в такой ситуации?
  • Вопрос задан
  • 107 просмотров
Пригласить эксперта
Ответы на вопрос 1
В .then записываешь в стейт, из стейта рендеришь.
Если приложение большое, то redux + redux-thunk в помощь.

Да и обрати внимание на замечание от WbICHA создавать в рендере екземпляр класса это больше чем нечто, у меня для этого есть гораздо менее культурное слово из 6 букв.

В JS дохрена асинхронного кода и Promise - отличный способ его менеджить, потому что без него у тебя будут колбеки, их ад и вечнаяя попытка впихнуть return в колбек. По идее почитав про Промисы ты должен радоваться как ребенок и петь песни.
https://habr.com/ru/company/vk/blog/269465/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы