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

【问题标题】：Axios post .then functionality triggers in Chrome but not in Firefox/Safari etcAxios post .then 功能会在 Chrome 中触发，但不会在 Firefox/Safari 等中触发
【发布时间】：2020-02-12 02:38:08
【问题描述】：

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

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

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

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

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

<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 中有效——即使如此，即使在 Chrome 中，console.log(response.data) 也不会出现在我的控制台中——就好像这个函数被部分输入了（如果那是什一个东西）或根本没有输入，就像 Firefox/Safari 的情况一样。

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

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

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

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

谢谢。

【问题讨论】：

catch 中的函数是否被调用？也许服务器没有给出任何响应或给出错误？
@canbax 我在 then 中添加了 console.log(response) 并在 catch 中添加了 console.log("I'm here") - catch 没有触发但控制台显示两个记录响应，即数据响应显示两次，这很奇怪，因为我只告诉它在 then 函数中记录一次响应。
当我在 chrome 中使用 console.log(response) 时在我的控制台中看到这个：i.imgur.com/9xqCgkP.png 控制台不显示/填充 Firefox/Safari
我真的无法理解你的情况。你说“似乎只在 Chrome 中工作 - 即使那样，console.log(response.data) 即使在 Chrome 中也没有出现在我的控制台中”，但在评论中你说“控制台显示了两个响应日志”。我的第一个建议是，如果您无法理解代码是如何执行 DEBUG EVERYTHING 的。逐行放置断点，逐个函数调用。由于浏览器依赖性，这可能是一个问题，formSubmit 函数可能会以某种方式被调用两次
基本上，我的观点是 Chrome 是唯一一个向我显示来自 console.log 的任何类型输出的浏览器 - 但类名更改在 Chrome 中工作，因此在该浏览器中没有什么可调试的。我已经解决了 console.log(response) 显示两次 - 这是因为 formSubmit 被调用了两次，一次从
再次从

标签： javascript php laravel vue.js axios

【解决方案1】：

问题在于请求/响应周期是如何被前端捕获的。必须使用一个 npm JS 包来处理响应并在前端下载文件，称为 JS FileDownloader，以便在下载文件时“看到”文件，并在之后启动后续的 JS 脚本/CSS 样式等。

【讨论】：