javascript - Axios post .then 功能会在 Chrome 中触发，但不会在 Firefox/Safari 等中触发

问题描述

我正在从我的服务器返回一个 CSV 下载，如下所示：

    $headers = ['Content-Type' => 'application/csv'];
    return response()->download($filepath, $filename, $headers)->deleteFileAfterSend(true);

这实际上可以像我想要的那样工作并下载到浏览器。

问题是，一旦后端的响应成功返回，我正在尝试将按钮上的类从下载图标更改为旋转图标并返回到原始下载图标-我正在.thenvue 中的函数中尝试此操作：

<template>在我的 Vue 部分中，带有我试图影响的所述类的按钮内的图标：

<button @click="formSubmit($event)"<i id="loadSpinner" class='zmdi zmdi-download' :class="spin"></i></button>

Vue 数据属性绑定到包含类名的“spin”变量：

    export default {
            data() {
                return {
                    spin: ''
                    selected: ''
                }
             }

包含formSubmit方法和后续逻辑的方法：

formSubmit(e) {

                let currentObj = this;

                currentObj.spin = 'zmdi zmdi-rotate-right zmdi-hc-spin';

                if(this.selected.length > 0){ 

                axios.post('/commercial', {
                    responseType: 'blob',
                    ratecard: currentObj.selected

                }).then(function (response) {
                    currentObj.spin = 'zmdi zmdi-download';
                    console.log(response);

                }).catch(function (error) {
                    currentObj.output = error;
                    console.log(currentObj.output);
                });

            }else {
                currentObj.spin = 'zmdi zmdi-download';

                swal({
                    type: 'error',
                    title: 'Oops...',
                    text: 'Please select an account reference'
                });
                e.preventDefault(); //to prevent white-page issue and page refresh
            }
        }

响应是一个 blob - 因此该selected值是通过罚款发送的，并且就所需功能而言，响应也很好，即向用户浏览器返回一个 CSV 下载。但是，在我试图更改“旋转”类的地方，这似乎只在 Chrome 中工作 - 即使那样，console.log(response.data)即使在 Chrome 中也不会出现在我的控制台中 - 就好像这个函数被部分输入了（如果这甚至是一件事）或者根本不输入，就像 Firefox/Safari 的情况一样。

对“旋转”图标的初始类更改有效 - 这是无效的更改。

我也尝试过使用 document.getElementsbyID 并尝试使用 .className 属性直接影响类的纯 JavaScript 尝试，同样可以使用 JQuery 说

如果有人能指出我正确的方向，我将不胜感激 - 如果需要，我随时提供进一步的信息。

我无法确定/隔离这是特定于浏览器的问题还是 Vue/Laravel 的问题。

谢谢。

标签： javascriptphplaravelvue.jsaxios

javascript - Axios post .then 功能会在 Chrome 中触发，但不会在 Firefox/Safari 等中触发

问题描述

解决方案

推荐阅读