欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue axios登錄請求攔截器

 更新時間:2018年04月02日 11:20:31   投稿:mrr  
這篇文章主要介紹了vue axios登錄請求攔截器,判斷是否登錄超時,或?qū)φ埱蠼Y(jié)果做一個統(tǒng)一處理的教程詳解,需要的朋友可以參考下

當(dāng)我們在做接口請求時,比如判斷登錄超時時候,通常是接口返回一個特定的錯誤碼,那如果我們每個接口都去判斷一個耗時耗力,這個時候我們可以用攔截器去進(jìn)行統(tǒng)一的http請求攔截。

1.安裝配置axios

cnpm install --save axios 

我們可以建一個js文件來做這個統(tǒng)一的處理,新建一個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 

然后在main.js中引入這個js文件

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

這樣就可以使用axios去請求了,在組件中可以用this.axios去調(diào)用

this.$axios({ 
    url:requestUrl+'homePage/v1/indexNewPropertiesResult', 
    method:'POST', 
   }).then(function(response){ //接口返回?cái)?shù)據(jù) 
    console.log(response) 
    that.modulesArr=response.data.data.modules; 
//   that.getRecommendGoods(0); 
   }); 

只有用axios請求接口,才能去攔截,現(xiàn)在已經(jīng)能在axios.js中攔截到了,可以在兩個狀態(tài)中做你需要的操作

補(bǔ)充:

axios使用攔截器統(tǒng)一處理所有的http請求

axios使用攔截器

在請求或響應(yīng)被 then 或 catch 處理前攔截它們。

•http request攔截器

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
  // 在發(fā)送請求之前做些什么
  return config;
 }, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error);
 });

•http respones攔截器

// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
  // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
  return response;
 }, function (error) {
  // 對響應(yīng)錯誤做點(diǎn)什么
  return Promise.reject(error);
 });

•移除攔截器

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

•為自定義axios實(shí)例添加攔截器

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

總結(jié)

以上所述是小編給大家介紹的vue axios登錄請求攔截器,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker的示例

    Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker的示例

    這篇文章主要介紹了Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點(diǎn)(自定義標(biāo)記圖標(biāo)),設(shè)置標(biāo)記點(diǎn)的優(yōu)先級問題,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-08-08
  • vue獲取input值的三種常用寫法

    vue獲取input值的三種常用寫法

    這篇文章主要介紹了vue獲取input值的三種常用寫法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)詳解

    Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)詳解

    這篇文章主要介紹了Vue3中的setup語法糖、computed函數(shù)、watch函數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03
  • vue中的$emit 與$on父子組件與兄弟組件的之間通信方式

    vue中的$emit 與$on父子組件與兄弟組件的之間通信方式

    本文主要對vue 用$emit 與 $on 來進(jìn)行組件之間的數(shù)據(jù)傳輸。重點(diǎn)給大家介紹vue中的$emit 與$on父子組件與兄弟組件的之間通信方式,感興趣的朋友一起看看
    2018-05-05
  • Vue金融數(shù)字格式化(并保留小數(shù))數(shù)字滾動效果實(shí)現(xiàn)

    Vue金融數(shù)字格式化(并保留小數(shù))數(shù)字滾動效果實(shí)現(xiàn)

    這篇文章主要介紹了Vue金融數(shù)字格式化(并保留小數(shù)) 數(shù)字滾動效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • Vue3封裝組件完整實(shí)例(帶回調(diào)事件)

    Vue3封裝組件完整實(shí)例(帶回調(diào)事件)

    Vue.js已成為現(xiàn)代Web開發(fā)中不可或缺的技術(shù)之一,雖然Vue.js的一些基礎(chǔ)概念和語法比較易學(xué),但深入挖掘Vue.js的核心概念和功能需要更多的實(shí)踐,下面這篇文章主要給大家介紹了關(guān)于Vue3封裝組件(帶回調(diào)事件)的相關(guān)資料,需要的朋友可以參考下
    2023-06-06
  • 基于Vue.js實(shí)現(xiàn)簡潔的多屏切換效果

    基于Vue.js實(shí)現(xiàn)簡潔的多屏切換效果

    在實(shí)際開發(fā)中,多屏切換是常見的需求,尤其是在需要展示大量內(nèi)容或信息時,下面我將向大家展示我是如何實(shí)現(xiàn)三屏,并通過動態(tài)按鈕控制切換屏幕的,感興趣的小伙伴跟著小編一起來看看吧
    2024-09-09
  • Vue中的Object.defineProperty全面理解

    Vue中的Object.defineProperty全面理解

    這篇文章主要介紹了Vue中的Object.defineProperty全面理解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue狀態(tài)管理工具Vuex工作原理解析

    Vue狀態(tài)管理工具Vuex工作原理解析

    Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于Vue中狀態(tài)管理器(vuex)詳解以及實(shí)際應(yīng)用場景的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • uniapp中uni-load-more的使用方式

    uniapp中uni-load-more的使用方式

    這篇文章主要介紹了uniapp中uni-load-more的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-05-05

最新評論