<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        Vue添加請求攔截器及vue-resource 攔截器使用

        來源:懂視網 責編:小采 時間:2020-11-27 22:24:56
        文檔

        Vue添加請求攔截器及vue-resource 攔截器使用

        Vue添加請求攔截器及vue-resource 攔截器使用:一、現(xiàn)象 統(tǒng)一處理錯誤及配置請求信息 二、解決 1、安裝 axios , 命令: npm install axios --save-dev 2、在根目錄的config目錄下新建文件 axios.js ,內容如下: import axios from 'axios' // 配置默認的host,假如你的API ho
        推薦度:
        導讀Vue添加請求攔截器及vue-resource 攔截器使用:一、現(xiàn)象 統(tǒng)一處理錯誤及配置請求信息 二、解決 1、安裝 axios , 命令: npm install axios --save-dev 2、在根目錄的config目錄下新建文件 axios.js ,內容如下: import axios from 'axios' // 配置默認的host,假如你的API ho

        一、現(xiàn)象

        統(tǒng)一處理錯誤及配置請求信息

        二、解決

        1、安裝 axios  , 命令: npm install axios --save-dev

        2、在根目錄的config目錄下新建文件 axios.js  ,內容如下:

        import axios from 'axios'
        // 配置默認的host,假如你的API host是:http://api.htmlx.club
        axios.defaults.baseURL = 'http://api.htmlx.club' 
        // 添加請求攔截器
        axios.interceptors.request.use(function (config) {
          // 在發(fā)送請求之前做些什么
          return config
        }, function (error) {
          // 對請求錯誤做些什么
        return Promise.reject(error)
        });
        // 添加響應攔截器
        axios.interceptors.response.use(function (response) {
          // 對響應數(shù)據(jù)做點什么
          return response
        }, function (error) {
          // 對響應錯誤做點什么
          return Promise.reject(error)
        });

        3、在main.js中進行引用,并配置一個別名($ajax)來進行調用:

        import axios from 'axios'
        import '../config/axios'
        Vue.prototype.$ajax = axios

        如圖:

        4、應用,一個登錄的post如:

        this.$ajax({
          method: 'post',
          url: '/login',
          data: {
            'userName': 'xxx',
            'password': 'xxx'
          }
        }).then(res => {
          console.log(res)
        })

        ps:下面看下vue-resource 攔截器使用

        在vue項目使用vue-resource的過程中,臨時增加了一個需求,需要在任何一個頁面任何一次http請求,增加對token過期的判斷,如果token已過期,需要跳轉至登錄頁面。如果要在每個頁面中的http請求操作中添加一次判斷,那么會是一個非常大的修改工作量。那么vue-resource是否存在一個對于任何一次請求響應捕獲的的公共回調函數(shù)呢?答案是有的!

        vue-resource的interceptors攔截器的作用正是解決此需求的妙方。在每次http的請求響應之后,如果設置了攔截器如下,會優(yōu)先執(zhí)行攔截器函數(shù),獲取響應體,然后才會決定是否把response返回給

        then進行接收。那么我們可以在這個攔截器里邊添加對響應狀態(tài)碼的判斷,來決定是跳轉到登錄頁面還是留在當前頁面繼續(xù)獲取數(shù)據(jù)。

        下邊代碼添加在main.js中

        Vue.http.interceptors.push((request, next) => {
         console.log(this)//此處this為請求所在頁面的Vue實例
         // modify request
         request.method = 'POST';//在請求之前可以進行一些預處理和配置
         // continue to next interceptor
          next((response) => {//在響應之后傳給then之前對response進行修改和邏輯判斷。對于token時候已過期的判斷,就添加在此處,頁面中任何一次http請求都會先調用此處方法
           response.body = '...';
            return response;
         });
        });

        在知道此方法之前,鄙人想了一個笨方法,但是也能在一定程度上降低修改工作量。方法是為Vue綁定一個this.$$http.get方法取代this.$http.get方法,每個頁面的http請求添加個$在$http前即可。

        // ajax.js
        function plugin(Vue){
         Object.defineProperties(Vue.prototype,{
         $$http:{
         get(){
         return option(Vue);
         }
         }
         })
        }
        function option(Vue){
         let v = new Vue();
         return {
         get(a,b){
         let promise = new Promise(function(reslove,reject){
         v.$http.get(a,b).then((res)=>{
         reslove(res)
         },(err)=>{
                    //處理token過期問題。
         })
         })
         return promise;
         }
         }
        }
        module.exports=plugin;
        //main.js
        import ajax from './ajax.js'
        Vue.use(ajax)

        總結

        以上所述是小編給大家介紹的Vue添加請求攔截器及vue-resource 攔截器使用,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        Vue添加請求攔截器及vue-resource 攔截器使用

        Vue添加請求攔截器及vue-resource 攔截器使用:一、現(xiàn)象 統(tǒng)一處理錯誤及配置請求信息 二、解決 1、安裝 axios , 命令: npm install axios --save-dev 2、在根目錄的config目錄下新建文件 axios.js ,內容如下: import axios from 'axios' // 配置默認的host,假如你的API ho
        推薦度:
        標簽: 使用 VUE 攔截器
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 日韩高清免费在线观看| 久草视频免费在线观看| 免费人成无码大片在线观看| 亚洲精品美女久久7777777| 啦啦啦高清视频在线观看免费| 亚洲人成电影在线观看青青| 最近中文字幕免费2019| 亚洲六月丁香婷婷综合| 大学生高清一级毛片免费| 亚洲AV无码一区二区三区性色 | 国产一精品一AV一免费| 国产精品亚洲成在人线| 免费无码VA一区二区三区| 麻豆亚洲AV永久无码精品久久| 亚洲大片免费观看| 亚洲AV无码无限在线观看不卡| 日产乱码一卡二卡三免费| 人人鲁免费播放视频人人香蕉| 亚洲中文字幕无码不卡电影| 国产免费一区二区三区不卡| 蜜芽亚洲av无码精品色午夜| 成人免费午夜在线观看| 美女免费视频一区二区三区| 久久久久无码专区亚洲av| 黄网站色视频免费在线观看的a站最新| 亚洲AV中文无码字幕色三| 91成年人免费视频| 国产精品亚洲专区无码唯爱网| 在线日韩日本国产亚洲| 在线看片免费人成视久网| 久久久国产亚洲精品| 国产偷窥女洗浴在线观看亚洲| 久久精品无码专区免费东京热 | 亚洲人成网站免费播放| 亚洲AV网一区二区三区 | 日本视频在线观看永久免费| 亚洲福利视频网址| 亚洲精品乱码久久久久久蜜桃 | 99ee6热久久免费精品6| 亚洲AV无码XXX麻豆艾秋| 亚洲AV无码成人专区片在线观看|