Currently I'm trying to make two fetches at the beginning of the website loading process. I'm getting my data via sftp and if I'm fetching both endpoints alone its working. But if I'm trying to get both at the same time, my image is "forever" fetching in the network tab and does not show up. So it seems that they block each other, but I don't understand this, because they are working asynchronously?
This is my main Page, where the image should load:
useEffect(() => {
fetch(`${URLS.apiUrl}/image/label`)
.then(async (x) => {
let resp = await x.json()
if (resp !== undefined && resp.id === undefined && resp.data === undefined) {
setNoImageAvailable(true)
return
}
setImage(resp.data)
})
}, [reRenderValue])
Now I made another component for a better overview, which is linked into my main page and uses a own useEffect
(I already tried it with using both fetches in one useEffect
, but that also does not work)
useEffect(() => {
fetch(`${URLS.apiUrl}/files/gaugeNames`)
.then(async (v) => {
try {
let resp = (await v.json())
setFilenames(resp)
} catch {
console.log('Could not parse response')
}
})
}, [reload])
As I already said, I'm using sftp to get my data from a ftp, that's the way i do it:
async getGaugeFiles(req, res, next){
// res.json([]);
//Connect FTP Client
await SFTPClient.connect()
//Get all Gauge files from host
let fileList = (await SFTPClient.listFiles(environment.FTP_PATH_GAUGE))?.map(f => `gauge_${f.name}`)
//Disconnect FTP Clients
await SFTPClient.disconnect()
return res.json(fileList)
}
I already checked the return and it return me the correct fileList, so its working well.
Now comes my problem, I'm getting also an error in my backend if my trying to fetch both routes. It says "Error downloading file {FILENAME}: Error: _get: No response from server" and it also tells me "ERR_GENERIC_CLIENT" This comes through my last function, where I'm loading my files
async download(file, path) {
try {
return await this.client.get(`${path}/${file}`)
} catch (err) {
console.log(`Error downloading file ${file}:`, err)
return null
}
}
Fixed it with a timer. With a timer of 1 Second im letting the first fetch through and after that i can fetch the other things. Not the best solution but currently the only one which is working.