Почему Promise pending?

Question

[Николай Семенов]

Ребят, всем привет.

есть такая функция

import axios from "axios";

const isValidEmail = email => {
  console.log(email);
  const endpoint = process.env.REACT_APP_EMAIL_VALIDATION;
  const url = `${endpoint}&email=${email}`;
  return axios.get(url).then(result => {
    return result.data.format_valid;
  });
};

export default isValidEmail;

Далее она импортируется в реакт компонент и вызывается в рендере

import React from "react";
import FormEmailInput from "./FormEmailInput";
import { Field } from "redux-form";
import withDisabled from "components/connectors/withDisabled";
import PropTypes from "prop-types";
import { flatten } from "lodash";
import hasValue from "utilities/hasValue";
import isValidEmail from "utilities/isValidEmail";

export class FormGroupField extends React.Component {
  requiredValidation = value => {
    const { formDisabled } = this.context;
    const { disabled, required } = this.props;

    if (formDisabled || disabled) return;
    if (!required || hasValue(value)) return;
    // if (isValidEmail(value)) {
    //   return;
    // } else {
    //   return "Invalid Format";
    // }
    return "This field is required";
  };
  emailValidation = value => {
    return isValidEmail(value);
  };
  render() {
    const { validate } = this.props;
    console.log(isValidEmail("[e-mail]"));
    return (
      <FormEmailInput
        renderChildren={Field}
        {...this.props}
        validate={flatten([
          this.requiredValidation,
          this.emailValidation,
          validate
        ])}
      />
    );
  }
}

FormGroupField.contextTypes = {
  formDisabled: PropTypes.bool
};

FormGroupField.defaultProps = {
  required: false,
  disabled: false, // only disable the built-in validation
  validate() {} // validation still works here
};

export default withDisabled(FormGroupField);

Почему в консоле выводит Promise {<pending>}

Answer 1

[Антон Спирин]

Вы неправильно работаете с асинхронным кодом. Вызывать его в render неправильно.
Вы что сделать то хотите?
Для работы с асинхронными вызовами основанными на Promise используйте метод then или async/await функции.
Пример использования метода then:

isValidEmail("[e-mail]").then(result => someAction(result));

Пример использования async/await:

async someHandler() {
  const result = await isValidEmail("[e-mail]");

  return someAction(result);
}

async someOtherHandler() {
  const result = await isValidEmail("[e-mail]");
  
  /* вызов someOtherAsyncAction тоже возвращает Promise, поэтому ждем 
     и возвращаем только когда придет результат, для этого используем 
     ключевое слово await                                             */
  return await someOtherAsyncAction(result); 
}

Comments

[Николай Семенов]

Антон Спирин задумка такая, что я используя redux-form хочу передать в validate эту функцию проверку email. и вот если оно возвращает тру я пишу что он валидный если нет то нет...но возвращается Promise {pending}

[Николай Семенов]

Антон Спирин а вот эта функция правильно написана?

const isValidEmail = email => {
  console.log(email);
  const endpoint = process.env.REACT_APP_EMAIL_VALIDATION;
  const url = `${endpoint}&email=${email}`;
  return axios.get(url).then(result => {
    return result.data.format_valid;
  });
};

[Антон Спирин]

Николай Семенов, ваш подход неверен. Вы должны писать валидацию на уровне формы, а в детей передавать хандлеры. По изменению или как вы там хотите, вызывайте метод

emailValidation = value => {
   isValidEmail(value).then(val => this.setState({ isEmailValid: val })):
};

isEmailValid из состояния и передавайте в свойство validate.

Сейчас у вас компонент называется FormGroupField, а в нем реализация валидации email. Это неправильно.

Answer 2

[Dark_Scorpion]

Вывод результата валидации.

isValidEmail("[e-mail]")
.then( (result) => {
  console.log(result);
})
.catch( (err) => {
  console.log(err);
})

Comments

[Николай Семенов]

это все понятно, вопрос в том как из запроса вернуть значение..в консоль то все выводится. а если вернуть result то возвращается промис

[Павел Диденко]

Николай Семенов, вам удалось разобраться с этим? Сейчас на такую же фигню напоролся

[Dark_Scorpion]

Николай Семенов, вынести логику функции из промиса, чтоб она стала синхронная.