javascript - 我如何获取 Axios 发布请求正在进行中

Question

这是我想要实现的一个简单的事情(简单的 Ajax 请求。我为此使用 Axios。)

就像当用户单击按钮时，会在处理请求的同时触发ajax请求，或者直到完成请求为止我想禁用按钮(或者其他任何东西，例如用户无法与界面交互或向用户显示进度条)。请看代码注释你就会明白我真正想说的。

在 Axios get 方法中工作完美，请参见下面的代码

axios.get(url, {
        onDownloadProgress: function (progressEvent) {
            // for get method its working perfectly
            // ajax is processing
            // i can disable the button
        },
        onUploadProgress: function (evt) {
            // this event method never fired
        }
    }).then(res => {
       // ajax is finished
       // i can enable the button again
    })

但是在 post 方法中它不起作用 - 现在我能做什么

axios.post(url, {
        onDownloadProgress: function (progressEvent) {
            // this event method never fired
        },
        onUploadProgress: function (evt) {
            // this event method never fired
        }
    }).then(res => {
       // ajax is finished
       // i can enable the button again
    })

没有 Axios 也能完美工作

    let xml = new XMLHttpRequest();

    let token = document.querySelector('meta[name="_token"]').getAttribute('content');

    xml.open("POST", "/test");
    xml.setRequestHeader("X-CSRF-TOKEN", token);


    xml.addEventListener('progress', function(evt) {
            // ajax is processing
            // i can disable the button
    });

    xml.addEventListener("load", function(evt){
        // ajax is finished
       // i can enable the button again
    });
    xml.send();

注意:我正在使用 laravel 框架

Answer 1

您应该按以下方式使用 axios 的 post 方法:

axios.post(path, data, options) 

在您的情况下，您正在传递选项对象而不是 POST 请求的数据对象。如果您不想随请求发送任何内容，解决方案是将空对象作为数据传递:

axios
  .post(
    url,
    {},
    {
      onDownloadProgress: function(progressEvent) {
        // ...
      },
      onUploadProgress: function(evt) {
        // ...
      }
    }
  )
  .then(res => {
    // ...
  });