フロントエンド理論面接-router+axios

Vue Router
Vue RouterはVueです.js公式のルーティングマネージャ.
以下の機能があります.
ネストされたルーティング/グラフのモジュール化、コンポーネントベースのルーティング構成ルーティングパラメータ、クエリー、ワイルドカードはVueベースである.js遷移システムのビュー遷移効果細粒度のナビゲーション制御自動アクティブCSS class付きリンクHTML 5履歴モードまたはhashモード、IE 9でカスタムスクロールバー動作を自動的に降格
1.vue-router実装原理
vue-routerは、●hash:URL hash値を使用してルーティングする3つの動作モードを提供します.既定のモード.●history:HTML 5 History APIとサーバ構成に依存する.HTML 5 Historyモードを表示します.●abstract:Node.jsサーバ側

hashモードajaxの流行に伴い、非同期データ要求インタラクションはブラウザをリフレッシュせずに実行される.非同期インタラクションのより高度なバージョンは、SPA-単一ページアプリケーションです.単一ページアプリケーションは,ページインタラクションにリフレッシュがないだけでなく,ページジャンプにもリフレッシュがないため,単一ページアプリケーションを実現するためにフロントエンドルーティングがある.サービス側ルーティングと同様に、フロントエンドルーティングは、異なるurlパスにマッチングして解析し、領域htmlコンテンツを動的にレンダリングすることで実現されます.しかし、urlが変化するたびにページがリフレッシュされるという問題があります.その問題解決の構想はurlを変える場合、ページの更新を保証することである.2014年まではhashでルーティングを実現していましたurl hashは

に似ています

http://www.xxx.com/#/login

こんな#です.後のhash値の変化は、ブラウザがサーバに要求を発行したり、ブラウザが要求を発行したり、ページをリフレッシュしたりすることはありません.またhash値の変化のたびにhashchangeというイベントがトリガーされ,このイベントによってhash値にどのような変化が起こったかを知ることができる.次にhashchangeをリスニングして、ページの一部のコンテンツを更新する操作を実現します.

function matchAndUpdate () {
   // todo    hash   dom     
}

window.addEventListener('hashchange', matchAndUpdate)

historyモードは14年後、HTML 5規格が発表されたためだ.2つのAPI、pushState、replaceStateが追加され、urlアドレスを変更し、リクエストを送信しません.popstateイベントもあります.これらによりフロントエンドルーティングを別の方法で実現できるが,原理はhash実装と同じである.HTML 5の実装では、1ページルーティングのurlが1つ増えず、より美しくなります.ただし、#番号がないため、ユーザーがページをリフレッシュするなどの操作を行うと、ブラウザはサーバに要求を送信します.このような状況を回避するために、この実装にはサーバのサポートが必要であり、すべてのルーティングをルートページにリダイレクトする必要があります.

function matchAndUpdate () {
   // todo        dom     
}

window.addEventListener('popstate', matchAndUpdate)

3.abstractモードabstractモードは、ブラウザに依存しないブラウズ履歴仮想管理バックエンドを使用します.プラットフォームの違いから、Weex環境ではabstractモードのみがサポートされていることがわかります.ただし、vue-router自体は環境をチェックします.ブラウザのAPIがない場合、vue-routerはabstractモードに自動的に強制的に入るので、vue-routerを使用する場合はmode構成を書かない限り、デフォルトではブラウザ環境でhashモードを使用し、モバイルエンドのオリジナル環境でabstractモードを使用します.(もちろん、abstractモードをすべての場合に使用することも明確に指定できます).
2.ルーティングフック
vue-routerが提供するナビゲーションガードは、主にジャンプまたはキャンセルによってナビゲーションをガードするために使用されます.ルーティング・ナビゲーション・プロセスに植え込む機会は、グローバル、単一のルーティングがユニーク、またはコンポーネント・レベルです.
グローバルフロントガード

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

ナビゲーションがトリガーされると、グローバル・フロント・ガードが作成順に呼び出されます.ガードは非同期解析実行であり、ナビゲーションはすべてのガードresolveが完了するまで待機中です.nextメソッドを呼び出す必要があることを確認します.そうしないと、フックはresolvedされません.
グローバル解析ガードは2.5.0+routerを使用できます.beforeResolveはグローバルガードを登録します.これとrouter.beforeEachと同様に、ナビゲーションが確認される前に、すべてのコンポーネント内のガードと非同期ルーティングコンポーネントが解析された後に、解析ガードが呼び出されるという違いがあります.
グローバルバックフック

router.afterEach((to, from) => {
  // ...
})

グローバルバックフックを登録することもできますが、ガードとは異なり、next関数もナビゲーション自体も変更されません.
ルート独自のガード

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

ルーティング構成でbeforeEnterガードを直接定義できます.これらのガードは、グローバルフロントガードのメソッドパラメータと同じです.
コンポーネント内のガード

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    //              confirm    
    //  ！ ！       `this`
    //         ，         
  },
  beforeRouteUpdate (to, from, next) {
    //        ，           
    //     ，              /foo/:id，  /foo/1   /foo/2        ，
    //          Foo   ，          。                。
    //          `this`
  },
  beforeRouteLeave (to, from, next) {
    //                
    //          `this`
  }
}

完全なナビゲーション解析プロセス
ナビゲーションがトリガーされます.不活性なコンポーネントでガードを呼び出す.グローバルなbeforeEachガードを呼び出します.再利用されたコンポーネントでbeforeRouteUpdateガード(2.2+)を呼び出します.ルーティング構成でbeforeEnterを呼び出します.非同期ルーティングコンポーネントを解析します.アクティブなコンポーネントでbeforeRouteEnterを呼び出します.グローバルなbeforeResolveガード(2.5+)を呼び出します.ナビゲーションが確認されました.グローバルなafterEachフックを呼び出します.DOM更新をトリガーします.作成したインスタンスでbeforeRouteEnterガードからnextに渡されるコールバック関数を呼び出します.
AxiosはpromiseベースのHTTPライブラリで、ブラウザやnodeで使用できます.jsで.

ブラウザからXMLHttpRequests

を作成

node.js httpリクエスト作成

Promise API

をサポート

ブロック要求および応答

変換要求データと応答データ

キャンセル要求

自動変換JSONデータ

クライアントは防御XSRF

をサポートする.
ブロッキング

//        
axios.interceptors.request.use(function (config) {
    //            
    return config;
  }, function (error) {
    //          
    return Promise.reject(error);
  });

//        
axios.interceptors.response.use(function (response) {
    //          
    return response;
  }, function (error) {
    //          
    return Promise.reject(error);
  });

後でブロッキングを削除する場合は、次のようにします.

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

ajaxと区別するAjax:
Ajaxは、「Asynchronous Javascript And XML」(非同期JavaScriptおよびXML)であり、インタラクティブなWebアプリケーションを作成するWeb開発技術を指す.Ajax=非同期JavaScriptとXML(標準共通タグ言語のサブセット).Ajaxは、高速ダイナミックWebページを作成するためのテクノロジーです.Ajaxは、Webページ全体を再ロードすることなく、一部のWebページを更新できる技術です.Ajaxは、バックグラウンドでサーバと少量のデータ交換を行うことで、Webページの非同期更新を実現します.これは、Webページ全体を再ロードせずに、Webページの一部を更新できることを意味します.従来のWebページ(Ajaxを使用しない)では、コンテンツを更新する必要がある場合は、Webページ全体を再ロードする必要があります.
//理論はテクニックがなく、死記に頼っていると思った.