JSチェーンコールバックインタフェースを確保する方法でフロントVUEプロジェクト

で何回と呼ばれる同じインターフェイスでのループのために、どのように同期実行の段階的な実施を確保します。

HTML部分

 < DcFileUpload 
 V - のため = "fileLengthListの（項目、インデックス）" 
 ：キー = "インデックス" 
 REF = "fileUploadData"> 
</ DcFileUpload>

DcFileIliad構成部品

ユーザは、ソケットの機能と同様の成分であることができるノードを追加する必要がある場合、//スロットタブは、代替ピットに残っています

<テンプレート> 
<DIV> 
    <DIV CLASS = "フォーム単位形態アップロード"スタイル= "表示：インラインブロック"> 
        < 入力
            V -model = "FILENAME" 
            クラス = "TC-15-入力テキストM" 
            無効
            ：プレースホルダ = "プレースホルダ" /> 
        <a class="tc-upload-btn"title="选择文件"> 
            の<divクラス= "ファイル入力ラップ"> 
                < 入力
                    REF = "入力" 
                    タイプ = "ファイル" 
                    名前 =「ファイル」
                    ：受け入れる = "受け入れ" 
                    スタイル "：999 Zインデックス" =を
                    @change = "handleFileChange" /> 
                <スパン>选择文件</スパン> 
            </ div> 
        </a>の
        <スロット> </スロット> 
    </ div>    
</ div> 
</テンプレート> 

<スクリプト> 
インポート{mapActions }から「vuex」。
以下からの輸入DcUploadHelper '@ /共通/ utilsの/ dcUploadHelper' ; 

エクスポートデフォルト{ 
    小道具：{ 
        のDirectoryID：{ 
            タイプ：文字列
            デフォルト： '' 、
        }、
        受け入れる：{ 
            タイプ：文字列
            
        プレースホルダ：{ 
            タイプ：文字列
            デフォルト： '还未选择文件' 、
        }、
    }、
    データ（）{ 
        リターン{ 
            ファイル名： ''、// 文件名
            ファイル：[]
         }。
    }、
    メソッド：{ 
        ... mapActions（ 'アルゴリズム' 、[
             'CreateUploadJob' 
        ]）、
        handleFileChange（E）{ 
            CONST {ファイル} = e.target。
            もし（ファイル[0] &&ファイル[0] .nameの&&ファイル[0] .size> 0 ）{
                 このファイル=は.filename [0 ] .nameの、
                 この .files = ファイル; 
            } 他{
                 これは.filename = '' ;
                 この .files = NULL ; 
            } 
        }、
        handleFileDelete（）{ 
            これは.filename = '' ;
             この .files = []; 
        }、
        アップロード（）{ 
            戻り 新しい新しい約束を（非同期（解決は、拒否）=> { 
　　　　　　　　　　　　総称書き込み要求方法が、背景にデータ要求を送信する
　　　　　　　　　　　　解決（ステータス）または（ステータス）を拒絶します。
                }）; 
            }）; 
        }、
        cancelUpload（）{ 
            この .showUploadModelは= 偽。
            DcUploadHelper.stopChunkUpload（）; 
        }、
        hasFile（）{ 
            戻り これは.filenameを== ''！ 。
        } 
    } 
}。
</ SCRIPT> 

<スタイルLANG = "少ない"> 
</スタイル>

上に書かれたコードは、配列リファレンスを使用する方法、refは通常書き込み標準プレスを読み取ることができるサイクル・ノード・アレイにわたって取得することができるオブジェクトに直接オブジェクト

JS部
非同期handleSubmitForm（）{ 
    // オブジェクトの対応する配列を得る 
　　CONST} = {fileUploadData この$参考文献;.
　　ため（LETインデックス= 0、インデックス<fileUploadData.length;インデックス++ ）{ 
　　　　CONST要素 = fileUploadData [インデックス]、
　　　　CONSTをRET = のawait element.upload（）; 
　　　　cosnole.log（RET）; 
　　} 
}

バックデータパケットの後に同じインターフェイスへの複数の呼び出しは、呼び出しチェーンを押すことが、上記のコードを保証し、次の呼び出しのための最後のインターフェイス要求を非同期と待ちます

JSチェーンコールバックインタフェースを確保する方法でフロントVUEプロジェクト

おすすめ