vue+axios はログインリクエストをインターセプトします

今回はvue+axiosによるログインリクエストのインターセプトについてお届けします。 vue+axiosによるログインリクエストのインターセプトの注意事項は次のとおりです。実際のケースを見てみましょう。

ログインタイムアウトを判断するときなど、インターフェイスリクエストを行うとき、インターフェイスは通常、時間と労力を要する各インターフェイスを判断する場合、インターセプターを使用してそれを行うことができます。 http リクエストのインターセプト。

1. axios をインストールして設定します

cnpm install --save axios 

この統合処理を行うための js ファイルを作成し、次のように新しい axios.js を作成します

import axios from 'axios' 
import { Indicator } from 'mint-ui'; 
import { Toast } from 'mint-ui'; 
// http request 拦截器 
axios.interceptors.request.use( 
  config => { 
    Indicator.open() 
    return config; 
  }, 
  err => { 
    Indicator.close() 
    return Promise.reject(err); 
  }); 
// http response 拦截器 
axios.interceptors.response.use( 
  response => { 
    Indicator.close() 
    return response; 
  }, 
  error => { 
    Indicator.close() 
  }); 
export default axios

次に、この js ファイルを main.js に導入します

import axios from './axio'; 
Vue.prototype.$axios = axios;

このようにして、axios を使用してリクエストすることができ、this.axios を使用してコンポーネント内でそれを呼び出すことができます

this.$axios({ 
    url:requestUrl+'homePage/v1/indexNewPropertiesResult', 
    method:'POST', 
   }).then(function(response){ //接口返回数据 
    console.log(response) 
    that.modulesArr=response.data.data.modules; 
//   that.getRecommendGoods(0); 
   });

axios を使用してインターフェースをリクエストするだけで、axios でインターセプトできるようになります。 js であり、2 つの状態にすることができます

で必要な操作を実行します: 追加:

axios はインターセプターを使用してすべての http リクエストを均一に処理します

axios はリクエストの前にインターセプターを使用します

または応答が then または catch によって処理されます。それらをインターセプトします。

•http リクエスト インターセプター

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
 }, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
 });

•http レスポンス インターセプター

// 添加响应拦截器
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);

•カスタム axios インスタンスにインターセプターを追加

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

マスターしましたさらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。

推奨読書:

環境別の Vue プロジェクトのパッケージ化手順の詳細な説明

Angular2 を使用する際の Dom の誤解を避ける

以上がvue+axios はログインリクエストをインターセプトしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。