асинхронное ожидание установки и возврата обещаний - PullRequest
Новая
       22

асинхронное ожидание установки и возврата обещаний

0 голосов
/ 28 февраля 2019

1) Я пытаюсь лучше понять async await.У меня было представление, что установка setState в функции await .then(//setState) позаботится об асинхронной природе setState, но это не так после выполнения некоторых тестов. 

constructor(){
   this.state = { msg: 'ZERO' }
}

async componentDidMount() {
    await this.setter();
    this.setState({ msg: 'TWO' });

    console.log('AFTER', this.state.msg) //Logs TWO
}

setter = () => {
    this.setState({ msg: 'ONE' }, () => console.log('INSIDE', this.state.msg)); //Logs ONE
    console.log('BOTTOM', this.state.msg) //Logs ZERO
    return Promise.resolve();
}

Журнал в setter() BOTTOM показывает ZERO, и это демонстрирует асинхронную природу setState.Даже если перед журналом устанавливается состояние ONE, в нем отображается значение по умолчанию ZERO.Часть, которую я не понимаю, - когда Обещание возвращается и setState повторяется после await this.setter(), журнал AFTER покажет TWO.Если это не ONE, так как setState в setter было от await, то после setState after не переносится в обещание или ожидание, но в журнале AFTER все еще отображается правильное значение.Почему ??

2) Мой другой вопрос, касающийся асинхронного ожидания, - это возвращение обещаний.Когда я не вернусь Promise.resolve(), появится сообщение об ошибке uncaught promise, cannot read property of then.Тем не менее, у меня есть функция onSubmit, которая применяет ожидание к переданной функции проп, которая не возвращает Promise.resolve(), но ошибка не отображается.

// COMPONENT A 

onSubmit = async () => {
    await this.props.passedInFunction(1);
}

// КОМПОНЕНТ B 

passedInFunction = (num) => this.setState({value: num});

Как видите, passedInFunction из COMPONENT B не возвращает Promise.resolve, но по какой-то причине в моем приложении, когда функция вызывается в COMPONENT Aэта «необъяснимая ошибка обещания не отображается».

РЕДАКТИРОВАТЬ: Забыли добавить await перед passedInFunction

1 Ответ

0 голосов
/ 28 февраля 2019

Поведение зависит от того, как вы используете асинхронное ожидание.

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

Если значение не является Обещанием, оно преобразует значение в разрешенное Обещание и ожидает его.

Так что вам не нужно возвращать Promise.resolve() изнутри setter метода, и что 

onSubmit = async () => {
    await this.props.passedInFunction(1);
}

и 

async componentDidMount() {
    await this.setter();
    this.setState({ msg: 'TWO' });

    console.log('AFTER', this.state.msg) //Logs TWO
}

будут работать без ошибок.

Теперь перейдем к вопросу, почему console.log('AFTER', this.state.msg) возвращает TWO.

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

В вашем случае вызов setState является последним в componentDidUpdate, и пакетная обработка не выполняется и, следовательно, она обновляется немедленно.Сказав это, нет гарантии, что в будущем вы напишете некоторый код, и это поведение больше не будет выполняться.

DEMO

...