<mark id="oyrth"></mark>
      <tbody id="oyrth"></tbody>
    1. <tbody id="oyrth"></tbody>
        <menuitem id="oyrth"></menuitem>
      1. Vue中使用Axios拦截器

        2019-4-19 释然 前端及开发文章及欣赏

        如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

        需求是拦截前端的网络请求和相应。
        废话不多说,直接上干货。



        我用的是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了。

        完美!如有不对的地方还请各位大佬指点,万分感谢。

        踩过的坑:

            怎么在axios拦截器中使用vuex,首先我们要引入vuex的js文件,然后就可以用了,就这么简单。


        蓝蓝设计www.quanminreliao.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

        标签: Vue中使用Axios拦截器


        Powered by emlog 京ICP备12006971号-1 sitemap
        杀平特一肖-杀平特一肖不出-杀平特一肖公式
        m.2121buy.com m.304496092.com m.52chendumeishi.com m.52qqcz.com m.7568872.com m.99vv340.com m.agag70.com m.anpinglansai.com m.asshishicai.com m.baoshidamall.com m.bjoso.com m.bocdima.com m.bxxyzl.com m.cdjutaiedu.com m.cl1899.com m.cpexe.com m.cztxhg666.com m.diejuji66.com m.dmgjzx.com m.dphhw.com m.elitecld.com m.esexfree.com m.ezupdos.com m.fanfan-zone.com m.fengwoyidong.com m.getfault.com m.hcxiangjiao.com m.hf556.com m.hongfushangmao.com m.huibobet.com m.hyhatch.com m.hzybqh.com m.ibroyeur.com m.jiangyaqing.com m.ksuca.com m.liangdianjiaoyu.com m.lovegwu.com m.mayihuobang.com m.miaoxiangshike.com m.miiqin.com m.modelslimming.com m.msjyhs.com m.mysoushou.com m.myteenssex.com m.nanahey.com m.o48d.com m.o8jw.com m.pzsyr.com m.qgbrs.com m.rbrbt.com m.rfynq.com m.rqwdt.com m.rxbled.com m.rxdmn.com m.sct-ys.com m.sdyxtjy.com m.spark-eo.com m.spyware-pcrisk.com m.sxlrr.com m.syhrzg.com m.tadeyijia.com m.tengjingkj.com m.tiantianoa.com m.tykjr.com m.uxf7.com m.weakbug.com m.wgppd.com m.xajyz.net m.xiqidai.com m.yczszw.com m.youxiaad.com m.yue8888.com m.yzkths.com m.zqbf137.com m.zqssc05.com m.zsbxp.com m.zspxk.com m.zsxscj.com www.88366666.com www.942dn.com www.lottimes.com www.opc32.com www.ss-tm.com www.tiaopigui.com www.xmyinhe.com www.mfkof.com www.upsbbs.com www.gzesmb.com www.niqzone.com www.m-instyLe.cn m.1yguz.com m.2huoo.net m.51bpbpz.net m.53zy.net m.5ecn.net m.91youhui.net m.adospados.com m.afty.net m.afzn.net m.baobeiqianbao.net m.bestmeet.net m.bjbna.net m.bjkjwj.net m.cg365sc.net m.cnyntq.net m.congdash.net m.coybcs.net m.csoug.net m.dijier.net m.djhsc.net m.donghuiwan.com m.dsi-ag.com m.dzshgwx.net m.eamoy.net m.ecopote.com m.ehuiche.net m.eiconf.net m.eimeeting.net m.ez-ns.com m.freshkpop.net m.gaoxiaoduanzi.net m.glxiduobao.com m.guiqin.net m.guogai.net m.gydushu.com m.haokan5.net m.hltjq.net m.hshardcover.com m.huangjinnc.com m.huangzhe0910.com m.i517.net m.icauto.net m.ijiawei.net m.iyaorao.net m.iyuwei.net m.izxs.net m.jlskjk.com m.jnrstc.com m.jnxins.com m.joinchampions.com m.jsywym.net m.juezhe.net m.julisports.net m.kardon023.com m.keiee.net m.kkdb168.com m.ksb120.net m.kzbiz.net m.laziw.com m.lcoder.net m.lefuxx.com m.live-cam4sex.com m.louboutinb.com m.ly568.net m.matengfei.net m.mblabc.net m.mcmcmc.net m.meitwo.net m.miyueing.com m.mjrgb.com m.mmd47.com m.mms39.com m.nanjingwx.com m.naodongxueyuan.com m.ncwywk.com m.neimengguly.com m.newcityvr.com m.newhnwg.com m.ngzrb.com m.nianlai.net m.niuhuotong.com m.nj142.com m.nmgmmw.com m.nnwsn.com m.nongtaifruit.com m.npymh.com m.nqbcs.com m.nwezq.com m.oe2pq.com m.p950r.com m.panoad.net m.papasj.com m.pcfordlm.com m.pinkypunk.com m.pojox.net m.popo365.net m.portalfan.net m.qhy360.com m.qinghuayingyu.com m.qingjiankeji.com m.qirongzhongchou.net m.qiutianzichan.com m.quanminkuaiduobao.com m.quansiweizhiyuan.com m.readc.net m.rpocr.net m.sdell.net m.sdhzz.net m.senrijin.com m.shangzewangluo.com m.shanmeme.com m.shanrenzixunjituan.com m.shengwh.com m.shengzhiqi.net m.shfongwei.com m.shiguangji888.com m.shiyihui.net m.shop666.net m.shoppniac.com m.shyarun.com m.softsweet.net m.sxsgky.net m.szifresh.com m.tahuyu.net m.taiyear.net m.taowogo.com m.taxionghaizi.com m.thirftyfun.com m.tiqianme.com m.tjcbmy.com m.tjynet.com m.tyc1413191.com m.v-liandong.com m.v-quick.net m.vrwar.net m.walyy.net m.we30.net m.weixd.net m.wenancn.net m.wetrussian.com m.wuaimei.net m.wuyutong.net m.wzj0759.com m.xianyoujie.com m.xiaolangli.com m.xiaolieai.com m.xiawangshipin.com m.xiyuesh.com m.xuanf.net m.xyflower.net m.xzcit.net m.yifoobao.net m.yjhzttjq.com m.yjk1997.com m.ylmov.net m.yongyijinfu.com m.yueguoji.net m.zhansen8.com m.zhaokuandai.com m.zhc-nj.com m.zhongruiedu.com m.zivdoll.com m.zjjyjn.com m.zmkaolu.com m.zmtbs.com m.zmysjh.com m.zzfreemaker.com