今回は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 プロジェクトのパッケージ化手順の詳細な説明
以上がvue+axios はログインリクエストをインターセプトしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。