Визуализируйте загрузчик, пока файлы отправляются на сервер вact.js - PullRequest
Новая
       38

Визуализируйте загрузчик, пока файлы отправляются на сервер вact.js

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

Я отправляю XML-файлы на сервер с помощьюact.js и хочу отображать загрузчик до тех пор, пока сервер не ответит.

Я попытался с одним компонентом файла, и он работает.Но я хочу сделать это с тремя разными файлами, каждый с разным размером и временем отклика.

У меня есть что-то вроде этого. 

class UploadFiles extends Component {
  state = { 
  isLoading: null }

 // Omitted code for upload files to the state


 uploadData(file){
 // Omitted Code <- Asynchronous function, each file has a different
                    response time.
 }


  handleSubmit(){

    this.setState({isLoading:true}, () => {
     uploadData(file1).then(res => {
         // Do something with the response
     this.setState({isLoading: false});
    }

    this.setState({isLoading:true}, () => {
     uploadData(file2).then(res => {
         // Do something with the response
     this.setState({isLoading: false});
    }

    this.setState({isLoading:true}, () => {
     uploadData(file3).then(res => {
         // Do something with the response
     this.setState({isLoading: false});
    }


  }

  render() { 
    return (
   const {isLoading} = this.state;
   if(isLoading){
     return <Loader/> 
   }else {
   return (
   <div>
   <FileComponent />
   <FileComponent/>
   <FileComponent/>
   <button onClick={this.handleSubmit.bind(this)}>submit</button>
   </div> );}
  }
}

Этот вид работает, но еслиfile1 загружается на сервер быстрее, чем два других файла, компонент Loader по-прежнему не отображается.Мне нужно, чтобы загрузчик по-прежнему отображался до тех пор, пока три файла не были загружены на сервер.

Есть какой-нибудь правильный / чистый способ сделать это?Примечание: мне нужно отправить файлы один за другим на сервер.Сервер получает только один файл за запрос.

1 Ответ

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

Вы порождаете 3 параллельных загрузки, и, как вы уже заметили, первая, которая заканчивает наборы isLoading = false.

Чтобы дождаться нескольких обещаний, используйте Promise.all , например так: 

this.setState({isLoading:true}, () => {
    Promise
        .all([
             uploadData(file1)
             uploadData(file2),
             uploadData(file3)
        ])
        .then(() => {
            this.setState({isLoading:false})
        })
});
...