Je veux afficher une barre de progression pendant qu'Axios reçoit mes demandes. Le package axios a à la fois onDownloadProgress et onUploadProgress pour afficher une barre de progression pendant le téléchargement ou le téléchargement, mais pas de barre de progression lors de la demande d'obtention. J'ai cherché beaucoup de questions et d'articles, mais ils concernent toujours la progression du téléchargement / téléchargement ou de Vue.js et je ne comprends pas comment le faire dans React.
J'ai le code suivant ci-dessous ( qui ne fonctionnera pas car je ne télécharge pas).
Idéalement, je l'écrirais moi-même; mais je suis prêt à envisager d'utiliser le package axios-progress si quelqu'un pouvait m'expliquer comment j'intégrerais le loadProgressBar () avec ma requête Axios.
request = () => {
this.setState({error: null, results: []})
axios({
method: 'get',
url: process.env.REACT_APP_API_LOCALS,
responseType: 'json',
onDownloadProgress: (progressEvent) => {
var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
this.setState({
loading: percentCompleted
})
},
})
.then(
(response) => {
console.log(response)
this.setState({
results: response.data.results,
error: null,
totalPages: Math.ceil(response.data.count / response.data.results.length)
})
}
)
.catch(
(error) => {
this.setState({
loading: null,
error: true
})
}
);
}
3 Réponses :
Je pense que la raison pour laquelle axios expose à la fois onUploadProgress et onDownloadProgress est que vous pouvez facilement effectuer des calculs sur les octets transférés. En cas de simple demande de serveur, je pense que l'utilisation d'un indicateur tel que le réglage sur
state = {
loading: false
}
et le basculement sur true chaque fois que vous faites votre demande est idéal. Vous pouvez utiliser un spinner comme masque si vous le souhaitez.
Le spinner que je sais faire, en effet, c'est un passage facile de faux à vrai. Cependant, j'ai au moins 7 pages avec différentes demandes de beaucoup de données. Au lieu d'un spinner, je trouve que ce cas a besoin d'une barre de progression afin que les utilisateurs sachent combien de temps il faudra pour que le contenu se charge.
Avez-vous pensé à utiliser Suspense et React.lazy ? Je pense que c'est la bonne chose à faire dans ce cas (si je ne me trompe pas), en chargeant progressivement les pages au fur et à mesure que l'utilisateur les parcoure plutôt que de les charger toutes en même temps. Cela améliore également l'expérience utilisateur.
Je pense que ce serait certainement intéressant à utiliser! Et dans ce cas, je pense qu'un simple spinner fera l'affaire. Toutefois; car je n'ai pas encore trouvé de réponse à cette question spécifique ni dans les articles ni sur Stackoverflow, je vais laisser cela ouvert pendant un certain temps afin que les futurs développeurs de React qui rencontrent le même problème puissent trouver une solution ici. Merci pour le conseil Suspense / React.lazy! @tbuglc
Vous êtes les bienvenus. Vous pouvez également trouver cette conférence de Andrew Clark Rendu simultané dans React [ youtube.com/watch?v=ByBPyMBTzM0] intéressant
Je sais que vous avez demandé une barre de progression, mais j'ai utilisé ce didacticiel pour créer un cercle de progression en utilisant des cercles svg avec stroke-dasharray et stroke-dashoffset propriétés.
https://css-tricks.com/building-progress-ring- rapidement /
Tout est fait dans React donc cela devrait être une implémentation assez simple pour vous.
Voici ce qui a fonctionné pour moi dans React:
const client = axios.create({
baseURL: 'http://localhost:10000/v1/client',
timeout: 20000
})
let result = await client.get('/fetchMeSomething', {
onDownloadProgress: progressEvent => {
const total = parseFloat(progressEvent.currentTarget.responseHeaders['Content-Length'])
const current = progressEvent.currentTarget.response.length
let percentCompleted = Math.floor(current / total * 100)
console.log('completed: ', percentCompleted)
}
})
.then(res => {
console.log("All DONE: ", res.headers)
return res.data
})
Vous pouvez également utiliser let percentCompleted = Math.floor (progressEvent.loaded / progressEvent.total * 100) , donc pas besoin d'analyser et de regarder dans les en-têtes.