vue+axiosはログインを禁止します-jsチュートリアル-php.cn

vue+axiosはログインを禁止します

php中世界最好的语言

リリース： 2018-06-12 09:52:35

オリジナル

1337 人が閲覧しました

今回は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 サイトの他の関連記事にご注目ください。

推奨読書:

JS は中国語と英語を除外し、文字数をカウントします

FileReader API の使用法

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