React - вернуть объект из вспомогательного метода get request

У меня есть функция, которая вызывается во многих местах моего приложения, поэтому я пытаюсь превратить ее в вспомогательный метод и просто импортировать, где это необходимо. Похоже, я не могу получить ответ от того, где я это называю. Где мой синтаксис неправильный, или, возможно, мой подход полностью отключен?

Я видел пост о том, как вернуться из Async AJAX-запроса. Это не покрывает мою проблему. Я знаю, как вернуть ответ. Я просто не знаю, как сделать это из одного файла в другой. Это моя проблема.

- Справочная функция

export function enforceEmployeeAuth() {
  let response;
  API.get('user/employee_auth', {}, function(res) {
    response = res
    return response
  })
}

Где это называется

componentDidMount() {
  let auth = enforceEmployeeAuth();

  // auth is undefined
}

Оригинальная функция

enforceEmployeeAuth() {
    API.get('user/employee_auth', {}, function(res) {
      this.setState({
        employee_auth: res.employee_auth,
        company_admin: res.company_admin
      });
    }.bind(this));
  }

1 ответ

Решение

Ответ зависит от того, поддерживает ли API обещания или нет.

Вот как бы я справился с обоими сценариями:

1) Только обратный звонок:

--- вспомогательная функция:

export function enforceEmployeeAuth(cb) {
  API.get('user/employee_auth', {}, cb)
}

--- Составная часть

componentDidMount() {
  enforceEmployeeAuth(res => this.auth = res);
}

2) Обещания поддерживаются

--- вспомогательная функция:

export function enforceEmployeeAuth() {
  return API.get('user/employee_auth', {});
}

--- Составная часть

componentDidMount() {
  enforceEmployeeAuth().then(res => this.auth = res);
}

Вы также можете захотеть использовать setState в обратных вызовах, поэтому ваш компонент перерисовывается при получении асинхронных данных.

Другие вопросы по тегам