在数据库中插入数据时如何显示“正在加载...”？

Question

I have big data to insert in database so I want to display Loading... while the data is being inserted in database and Done after it completes insertion.

I tried using async and await in fetch api but IDK why it is not wrking as expected.

await this.setState({
    isInserting:"onProgress"
  })

    let resonse = await fetch("http://localhost:4000/API/query/postExcel",{
      method:'post',
      headers:{
        Accept: "application/json",
        },
    })
    console.log(resonse)

    await this.setState({
      isInserting:'done'
    })


But it's setting isInserting to done but when I see console of my nodejs, it is still inserting data. What have I done wrong? I am new in JS.

Answer 1

There is some workaround:

if (resonse && resonse) {
    this.setState({
      isInserting:'done'
    })
}

But I wanna to see another variants.

Answer 2

There can be the case where your node server is taking a huge amount of time for entering the data in the database ,till then your request is getting timed out.

you can do a check for the same.

//This part will be defined in your Constructor
state = {
    inProgress : false
    success : false,
    error : false
}


this.setState({
    inProgress : true
})

let resonse = await fetch("http://localhost:4000/API/query/postExcel",{
method:'post',
headers:{
    Accept: "application/json",
    },
})
console.log(resonse)
if(resonse && resonse.status === 200)
{
    this.setState({
        inProgress: false,
        success : true
    })
}
else{
    this.setState({
        inProgress: false,
        error : true
    })
}