如何测量从 axios 调用加载 json 文件的进度？

Question

为了衡量进度，我正在考虑在进行axios调用的同时做这两件事：

1. 在调用 json 文件时获取文件大小
2. 从“网络”选项卡中获取下载的文件超出文件大小的百分比

到目前为止，我只有这个可以获取数据的地方，但我需要一些方法来获取它背后的元数据（网络控制台中的信息，如文件大小、到目前为止下载的数量）

const request = axios.get('/data');

request.then((response) => {


}

或者还有其他衡量进度的方法吗？

Answer 1

您只需要使用 onUploadProgress 函数传入一个配置对象：

let progress = 0;
const request = axios.post('/data', {
    onUploadProgress: function(event) {
       progress = Math.round((event.loaded * 100) / event.total);
    }
});

request.then((response) => {
    //
}

然后根据需要使用进度变量。

注意：如果使用get 请求，请使用onDownloadProgress，如提到的here