追求卓越一諾千金

藍藍設計|__倾城 许美静,2011年成立-_赢彩网是正规平台吗?,主創清華團隊_-_盈彩充值客服,專注軟件和互聯網ui設計開發_|11086移动彩票靠谱吗。擅長企業信息化管理_-闽江学院教务系统、監控__|女式西服品牌、大數據軟件UIUE谘詢和設計開發服務-u9u8。立足UI-|注册送体验金的彩票,好好學習|-年年顺调和油,天天進步--公顷换算!


Vue中使用Axios攔截器

2019-4-19 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容||1吨水多少立方米,每天自動發到您的郵箱中-_自由们7 39下载, 請點這裏

需求是攔截前端的網絡請求和相應-淄博豪哥健身俱乐部。
廢話不多說_抢拍手机,直接上幹貨-__东四命。



我用的是vue-cli3所以這個config文件是我自己創建的_-众盈彩票合法吗。

先介紹env.js

//根據不同的環境更改不同的baseUrl
let baseUrl = '';
 
//開發環境下
if (process.env.NODE_ENV == 'development') {
    baseUrl = '';
 
} else if (process.env.NODE_ENV == 'production') {
    baseUrl = '生產地址';
}
 
export {
    baseUrl,//導出baseUrl
}
在這裏我首先設置了開發環境和生產環境的地址-门德尔松无词歌,並向外拋出-陈姿彤微博。

在看一下axios.js

import {
    baseUrl, //引入baseUrl
} from "../config/env";
import axios from 'axios';
import qs from 'qs';
//引入vuex的js文件
import vuex from '../src/store/index';
 
// 創建 axios 實例
let service = axios.create({
    baseUrl: baseUrl,//請求前綴
    timeout: 20000,  // 請求超時時間
    crossDomain: true,//設置cross跨域
    withCredentials: true//設置cross跨域 並設置訪問權限 允許跨域攜帶cookie信息
})
 
// 設置 post 默認 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
 
// 添加請求攔截器
service.interceptors.request.use(
 
    (config) => {
        // console.log()
        //下麵的代碼是如何在攔截器中調用vuex管理狀態衡水热线欢迎你。
        //我這裏主要是做了一個蒙層的遮蓋
        // vuex.$store.commit('OPEN_LOADING');
 
 
        //判斷請求方式是否為POST|-_上海哪有蹦极的地方,進行轉換格式
        config.method === 'post'
            ? config.data = qs.stringify({...config.data})
            : config.params = {...config.params};
        // 請求發送前進行處理
        return config
    },
    (error) => {
        // 請求錯誤處理
        return Promise.reject(error)
    }
)
 
// 添加響應攔截器
service.interceptors.response.use(
    (response) => {
        let { data } = response;
        return data
    },
    (error) => {
        let info = {},
            { status, statusText, data } = error.response
 
        if (!error.response) {
            info = {
                code: 5000,
                msg: 'Network Error'
            }
        } else {
            // 此處整理錯誤信息格式
            info = {
                code: status,
                data: data,
                msg: statusText
            }
        }
    }
)
 
/**
 * 向外拋出service
 */
export default service
最後將這個axios.js文件引入main.js中-我们约会吧李飒,並將引入的axios掛載到Vue實例上就ok了--_长城物业信息管理系统。

完美-|-亿彩彩票客服!如有不對的地方還請各位大佬指點-|色拉油的密度,萬分感謝|_致富彩票快3。

踩過的坑||_陈超贤:

    怎麼在axios攔截器中使用vuex-||易投彩票,首先我們要引入vuex的js文件__|众信彩票官网提不了款,然後就可以用了-|_360购彩大厅怎么样,就這麼簡單--大城一中录取分数线。


藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|--陪葬品钥匙,為期望卓越的國內外企業提供卓越的UI界麵設計-_|360彩票走势图表、BS界麵設計 _|128福彩网站是真的吗、 cs界麵設計 -|印度电视剧新娘第五部、 ipad界麵設計 ||3208c刷机、 包裝設計 _|_6 13固件、 圖標定製 |_亿贝平台app、 用戶體驗 -|苏芩博客、交互設計__-平安果包装方法图解、 網站建設 |_|瑞士鹿喜微断食、平麵設計服務-|奥利奥金装广告歌曲。

標簽: Vue中使用Axios攔截器 « 大廠怎麼做設計-__广珠城轨最新时刻表?免費送你騰訊高級設計師自用的交互稿模板||_诸候! | 2019草莓音樂節的主視覺設計太讚了_|重庆电视台少儿频道!»


訂閱Rss