Axios: 要求进展？

我想到了。 所以我也可以使用onUploadProgress 。

@four-eyes-04-04 你是如何使用显示进度的方法的，请举例！

@slim12kg

let config = {
  onUploadProgress: progressEvent => {
    let percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total);
    // do whatever you like with the percentage complete
    // maybe dispatch an action that will update a progress bar or something
  }
}

axios.post('/path/to/post/', data, config)
        .then(response => console.log(response));

根据您对项目进行编码的方式，它可能会发生变化，如果我的代码让您感到困惑，请不要犹豫，问我更多，我会很乐意在阅读您的回复后立即提供帮助。 别客气。

:-)

@four-eyes-04-04 感谢您的帮助！

有什么方法可以确定请求的下载进度？

@PierBover使用 onDownloadProgress 而不是 onUploadProgress。 在https://github.com/mzabriskie/axios的请求配置部分找到它。

希望这可以帮助！

更新：发现这个问题https://github.com/mzabriskie/axios/issues/928

如何跟踪 0 - 100% 的完整进度？ 我总是得到 0 或 Nan 和 100

大家好！ 是否可以将 onDownloadProgress 与 axios.all 函数一起使用？

@jcmidia下载由浏览器处理，对吗？

嘿伙计们，如果你想以全局形式处理这个问题，你可以使用拦截器。 像这样：

import Axios from 'axios';

function onUploadProgress (ev) {
  console.log(ev);
  // do your thing here
}

function handleUploadProgress (ev) {
  console.log(ev);
  // do your thing here
}

Axios.interceptors.request.use(config => {
  ...config,
  onUploadProgress,
  onDownloadProgress
});

将这些代码添加到您的入口文件中，然后添加到您的其他文件（视图或组件）中：

文件.js

import Axios from 'axios';

function makeRequest () {
  axios.get('/to/path')
  .then(({ data })=> {
    console.log(data);
  });
}

另一个文件.js

import Axios from 'axios';

function makeRequest () {
  axios.post('/to/path', data, yourConfigIfAny)
  .then(({ data }) => {
    console.log(data);
  });
}

get使用onDownloadProgress ，其他请求使用onUploadProgress 。 （如有任何更正，请提及我）

这需要权衡。 如果您发送了多个请求，您可以将他们的total和他们的loaded相加，以获得进度的总百分比。

您可以稍微修改上面的代码以使其更加灵活，如下所示：

import Axios from 'axios';

function onUploadProgress (ev) {
  console.log(ev);
  // do your thing here
}

function handleUploadProgress (ev) {
  console.log(ev);
  // do your thing here
}

Axios.interceptors.request.use(config => {
  ...config,
  onUploadProgress: config.onUploadProgress || onUploadProgress,
  onDownloadProgress: config.onDownloadProgress || onDownloadProgress
});

现在您可以提供自定义的onUploadProgress和onDownloadProgress处理程序，它会相应地进行调整。

import Axios from 'axios';

function customOnUploadProgress (ev) {
  console.log('customOnUploadProgress', ev);
}

function makeRequest () {
  axios.post('/to/path', data, {
    onUploadProgress: customOnUploadProgress
  })
  .then(({ data }) => {
    console.log(data);
  });
}

嗨，大家好。 我按照你告诉我们的，但遗憾的是，就像@jayzyaj一样，我总是在上传/下载时得到“100”。 你知道这可能来自哪里吗？ 我的代码与拦截器@aprilmintacpineda非常相似，然后我只是复制/粘贴了这两个函数。

如果您的上传文件太小，或者下载/上传速度太快，则只能触发 100%。 尝试上传 10mb 文件。
对我来说同样的问题也解决了

upload: data => axios.post( "api/", data, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: (progressEvent) => { const percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total); // dispatch }, }, ), };

使用对象配置 axios 请求是一个问题，因为axios({method: "", config: {}, data: data})

你好，这个代码怎么用？
谢谢

嗨，我需要显示下载进度.... 我的逻辑是用 JSP 文件编写的...我应该在 React 中编写它吗？

PFB代码：

        $.ajax({
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                //Download progress
                xhr.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        dataloaded = evt.loaded;
                    }
                }, false);
                return xhr;
            },

            type: 'GET',
            url: urlForDownload,
            cache: false,
            beforeSend: function() {
                startTime = (new Date()).getTime();
                 start = startTime;
            },
            timeout: timeOutValue,
            complete: function() {
                end = new Date().getTime();
                var totalTime = end - startTime;

                arrTime.push((totalTime));
                arrData.push((dataloaded));
                processing += 12;
                progressBarInc(processing);
                d3.resolve("asda");

            }
        });