Axios: meminta kemajuan?

Saya menemukan jawabannya. Jadi saya juga bisa menggunakan onUploadProgress .

@four-eyes-04-04 Bagaimana Anda menggunakan metode untuk menunjukkan kemajuan, tolong contohnya!

@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));

Bergantung pada cara Anda mengkodekan proyek Anda, itu mungkin berubah, jika kode saya membingungkan Anda, jangan ragu untuk bertanya lebih banyak kepada saya dan saya akan dengan senang hati membantu segera setelah saya membaca tanggapan Anda. Terima kasih kembali.

:-)

@four-eyes-04-04 Terima kasih atas bantuannya!

Adakah cara untuk menentukan kemajuan unduhan dari suatu permintaan?

@PierBover Gunakan onDownloadProgress alih-alih onUploadProgress. Menemukannya di bagian Request Config di sini https://github.com/mzabriskie/axios .

Semoga ini membantu!

PEMBARUAN: Menemukan masalah ini https://github.com/mzabriskie/axios/issues/928

Bagaimana saya bisa melacak kemajuan lengkap dari 0 - 100%? Saya selalu mendapat 0 atau Nan dan 100

Halo semua! Apakah mungkin menggunakan onDownloadProgress dengan fungsi axios.all?

@jcmidia unduhan ditangani oleh browser, bukan?

Hai teman-teman, Anda dapat menggunakan intercetor jika Anda ingin menangani ini dalam bentuk global. Seperti:

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
});

Tambahkan kode-kode itu di file entri Anda, lalu di file Anda yang lain (tampilan atau komponen):

aFile.js

import Axios from 'axios';

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

lainFile.js

import Axios from 'axios';

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

get menggunakan onDownloadProgress , permintaan lain menggunakan onUploadProgress . (Tolong sebutkan saya untuk koreksi apa pun)

Ada trade off untuk ini. Jika Anda mengirim beberapa permintaan, terserah Anda untuk menjumlahkan total mereka dan loaded untuk mendapatkan persentase total kemajuan.

Anda dapat memodifikasi sedikit kode di atas agar lebih fleksibel seperti:

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
});

Sekarang Anda dapat memberikan custom onUploadProgress dan onDownloadProgress handler, itu akan menyesuaikannya.

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);
  });
}

Halo kawan-kawan. Saya mengikuti apa yang Anda katakan kepada kami, tetapi sayangnya, seperti @jayzyaj , saya selalu mendapatkan "100" sebagai hasilnya, baik saat mengunggah/mengunduh. Apakah Anda tahu dari mana itu bisa berasal? Kode saya sangat mirip dengan @aprilmintacpineda , pencegat, dan kemudian saya hanya menyalin/menempelkan 2 fungsi.

Hanya 100% yang dapat diaktifkan jika file unggahan Anda terlalu kecil, atau kecepatan unduh/unggah terlalu cepat. Coba unggah file 10mb mungkin.
Juga masalah yang sama bagi saya diselesaikan dengan

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

mengonfigurasi permintaan aksio dengan objek adalah masalah, karena axios({method: "", config: {}, data: data})

Hai, bagaimana cara menggunakan kode ini?
Terima kasih

Hai, saya perlu menunjukkan kemajuan pengunduhan .... Logika saya ditulis dalam file JSP ... bagaimana saya menulisnya dalam bentuk reaksi?

PFB kode:

        $.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");

            }
        });