vue +シンプルなスケルトン画面でデータを取得する2つの方法の練習

vueでデータを取得するには、2つの方法があります。最も重要な概要は次のとおりです。ナビゲーションが完了した後に取得する：最初にナビゲーションを完了してから、次のコンポーネントライフサイクルフックでデータを取得します。データ収集中は、「ロード中」などの表示が表示されます。ナビゲーションが完了する前に取得する：ナビゲーションが完了する前に、ルートに入るガードからデータを取得し、データの取得が成功した後にナビゲーションを実行します。技術的な観点からは、どちらの方法も優れています。必要なユーザーエクスペリエンスによって異なります。それでは、データを取得するこれら2つの方法と、ユーザーエクスペリエンスの最適化について少し考えてみましょう。
1.まず最初に、ナビゲーションが完了した後に取得します。この方法は、私たちが主に使用する方法です（最初はこの方法^Vしか知らない可能性があるため）。このメソッドを使用する場合、コンポーネントをすぐにナビゲートしてレンダリングし、コンポーネントの作成されたフックでデータを取得します。これにより、データ収集中のロード状態、および異なるビュー間の異なるロード状態を表示する機会が得られます。誰もがデータの取得方法を知っています。ユーザーエクスペリエンスに関するいくつかの事項を次に示します。データを取得する前にページコンポーネントが読み込まれましたが、データが取得およびレンダリングされていないため、その過程で、表示されるコンポーネントを読み込むことができません。ページ内のデータ。、ただし、読み込みコンポーネントまたはスケルトン画面が必要です。ページデータの取得が失敗した場合、それはリクエストのタイムアウトとして理解できます。表示したいのは、切断されたコンポーネントです。リストページの場合は、空のプロンプトのコンポーネントである空のデータの場合を考えてみてください。したがって、ページには次の基本的な3つの部分が必要です。コードを入力してください。

     <template>
    <div class="list">
        <!--加载中或者骨架屏-->
        <div v-if="loading">
       
        </div>

        <!--请求失败，即断网的提示组件-->
        <div v-if="error">
      
        </div>

        <!--页面内容-->
        <div v-if="requestFinished" class="content">
            <!--页面内容-->
            <div v-if="!isEmpty">
                <!--例如有个列表，当然肯定还会有其他内容-->
                <ul></ul>
            </div>

            <!--为空提示组件-->
            <div v-else>空空如也</div>
        </div>
    </div>
</template>

このデータ取得の場合、デフォルトで読み込み内容やスケルトン画面が表示され、データ取得に失敗した場合（リクエストタイムアウトやネットワーク切断）、エラーの構成要素が読み込まれます。およびその他のコンポーネントは非表示になっています。データ要求が成功した場合は、コンテンツコンポーネントをロードし、他のコンポーネントを非表示にします。リストページの場合、コンテンツコンポーネントにはリストと空のプロンプトの2つのコンテンツが含まれる可能性があるため、この時点で、コンテンツをロードするか、空のプロンプトをロードするかを決定する必要があります。得られたデータ。2番目の2番目の方法：ナビゲーションが完了する前に取得します。この方法は、ページのbeforeRouteEnterフックでデータを要求することであり、ナビゲーションページは、データが正常に取得された後にのみジャンプします。

 beforeRouteEnter (to, from, next) {        
    api.article.articleDetail(to.query.id).then(res=> {            
        next(vm => {                
            vm.info = res.data;                
            vm.loadFinish = true            
        })        
    })    
},

beforeRouteEnterのフックでこれをまだ使用できないことは誰もが知っているので、値を割り当てたりメソッドを呼び出したりする場合は、next（）メソッドのコールバック関数でのみ処理できます。このコールバック関数の最初のパラメーターは、これは、コンポーネントが正常に初期化された後に動作します。
私たちのapiまたはaxiosメソッドはvueのプロトタイプにマウントされていることが多いと思いますが、これはここでは使用できないため、ページコンポーネントに導入できるのはapiまたはaxiosのみです。
代入演算はメソッドメソッドで記述することもできますが、この代入メソッドを呼び出すメソッドはvm.yourFunction（）のままです。
空のプロンプト、切断処理などは最初の方法と同じですが、データを最初に取得してからジャンプしてコンポーネントをロードするため、期待されるページにスケルトン画面やロードコンポーネントを表示する必要はありません。はい、現在のページに入る前、つまり、ページ上部のプログレスバーなど、前のページの時点で読み込みプロンプトを表示する必要があります。このように、ユーザーエクスペリエンスはよりフレンドリーになり、ユーザーはリクエストが遅くなり、ユーザーが長時間応答しないという結果を知りません。ページ上部のグローバルプログレスバーは、router.beforeEach（to、from、next）{}を介してmain.jsで設定できます。ページルーティングが変更されると、ページ上部のプログレスバーが表示され、新しいルートに入った後、プログレスバーは非表示になります。プログレスバーの追加方法については、すでに別の記事に書かれているので、ここにリンクを送ってください。無駄を繰り返さないようにしています。操作も比較的簡単で、自分で確認できます。実際、これに関しては、スケルトン画面は偶然に解決されました。通常、ページスケルトン画面はページスケルトンの画像ですが、この画像はできるだけ小さくする必要があることに注意してください。

vue +シンプルなスケルトン画面でデータを取得する2つの方法の練習

おすすめ