Как правильно писать API запросы в react native?

Question

[vimirtv]

Пытаюсь сделать вот такой запрос

componentWillMount () {
    fetch('http://registry.domen.ru:5002/Profile/Authorize', { 
      method: 'POST', 
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        "userName": this.props.userName,
        "token": this.props.token
      })
    })
    .then((res) => {
      res.json().then((json) => {
        console.log('Получили токен',JSON.stringify(json.data.bearer))
      })
    })
    .catch((err) => {
        console.log(JSON.stringify(err))
}
    })

После чего выполняется render

render() {
    console.log('Готово')
    return (<Text>ПРИМЕР</Text>)
}

Почему console.log('Готово') выполняется раньше console.log('Получили токен',JSON.stringify(json.data.bearer)) ?
Как сначала получить ответ, а потом выполнить render

Answer 1

[Димка Реактнативный]

Почему console.log('Готово') выполняется раньше console.log('Получили токен',JSON.stringify(json.data.bearer)) ?

Во первый componentWillMount уже устарел и в будущих версиях будет исключен. Запросы к API нужно делать в componentDidMount()

Во вторых у React компонента есть жизненный цикл:

Mounting

constructor() // console.log('Готово')
static getDerivedStateFromProps()
render()
componentDidMount() // console.log('Получили токен',JSON.stringify(json.data.bearer))

Updating

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

Unmounting
componentWillUnmount()


Подробней о жизненном цикле снял видео