Axios post.then 功能在 Chrome 中觸發，但在 Firefox/Safari 等中不觸發

Question

我正在從我的服務器返回 CSV 下載，如下所示：

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

這實際上可以像我想要的那樣工作並下載到瀏覽器。

問題是，一旦后端的響應成功返回，我正在嘗試將按鈕上的 class 從下載圖標更改為旋轉圖標，然后返回到原始下載圖標 - 我正在我的.then function 中嘗試此操作在視圖中：

在我的 Vue 的<template>部分中，我試圖影響的按鈕中帶有 class 的圖標：

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

Vue 數據屬性綁定到“spin”變量，該變量包含 class 名稱：

    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 下載到用戶瀏覽器。 但是，在我試圖更改“旋轉” class 的地方，這似乎只在 Chrome 中有效 - 即使那樣，即使在 Chrome 中， console.log(response.data)也不會出現在我的控制台中 - 好像這個 function 是部分輸入（如果這甚至是一件事）或根本不輸入，就像 Firefox/Safari 的情況一樣。

最初的 class 更改為“旋轉”圖標有效 - 這是無效的更改。

我已經嘗試過純 javascript 嘗試也使用 document.getElementsbyID 並嘗試直接使用.className 屬性影響 class ，同樣可以使用 JQuery

如果有人能指出我正確的方向，我將不勝感激 - 如果需要，我隨時提供進一步的信息。

我無法確定/隔離這是特定於瀏覽器的問題還是 Vue/Laravel 的問題。

謝謝。

Answer 1

問題在於前端如何捕獲請求/響應周期。 必須使用 npm JS package 處理響應並在稱為 JS FileDownloader 的前端下載文件，以便在下載文件時“看到”文件，並在之后啟動后續的 JS 腳本/CSS 樣式等。