Извлечь / Axios Асинхронное / Ожидать приложение заморозить запрос в реагировать родной - PullRequest
Новая
       18

Извлечь / Axios Асинхронное / Ожидать приложение заморозить запрос в реагировать родной

0 голосов
/ 25 октября 2018

У меня проблема с приложением при запросе API.Моя проблема заключается в следующем:

Когда ожидается запрос приложения, приложение полностью зависает, и событие щелчка на вкладке настроек или кнопка «Тест 2» будет срабатывать только после выполнения запроса.Если у кого-то возникла такая же проблема, и вы нашли способ ее решить Пожалуйста, ответьте, спасибо! 

class HomeScreen extends React.Component {
  state = {
    isLoading: false
  }

  fetchData = () => {
    console.log('1');
    this.setState({isLoading:true});

    // await Promise.all(
      data.map(async (x) => {  
        await axios.get(x.url);        
      })
    // )

    console.log('2');    
    this.setState({isLoading:false})
  }

  renderLoading = () => {     
    if (this.state.isLoading) { 
      return <ActivityIndicator size={40} />
    }
    return null
  }

  test2 = () => {
    console.log('3');   
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>             
        {this.renderLoading()}
        <TouchableOpacity style={{height: 50}} onPress={() => this.fetchData()}><Text>Test</Text></TouchableOpacity>
        <TouchableOpacity style={{height: 50}} onPress={() => this.test2()}><Text>Test 2</Text></TouchableOpacity>            
      </View>
    );
  }
}

1 Ответ

0 голосов
/ 26 октября 2018

наконец я нашел решение, используя следующий кадр: 

let queue = Promise.resolve();       
data.forEach(x => {
    queue = queue.then(() => nextFrame().then(async () => {
        const response = await fetch(x.url);
        const content = await response.text();
        console.log(content);
    }));
});
queue.then(() => {
    console.log('complete!');    
    this.setState({isLoading:false})
});
...