axios拦截器

最近在项目中要用到拦截器，坦白说是第一次听说这玩意，所以也有所懵，经过查询资料现在也算是明白了拦截器的作用。我的理解就是拦截每一次你的请求和响应，然后进行相应的处理。来看看拦截去如何使用，如有不对请各位大神更正，也可以参考可以进入参考axios中文官方文档

首先安装axios，怎样安装我这里就不说了，下面开始我们的axios拦截器

项目文件夹中vue.config.js配置文件可以参考

  lintOnSave: false,//关闭esline
  devServer: {
    proxy: {//配置代理服务器
      '/hehe': {// 接口自己随意并非一定是hehe
        target: 'http://ustbhuangyi.com',//目标网站',   
        changeOrigin: true,
        pathRewrite: {
          "^/hehe": ''//将路径中多余的接口 删除
        }
      },
    }
  }
}

在src目录下创建api目录再创建一个js文件进行封装网络请求

//封装网络请求
import axios from '../utlis/axios'
/*****************推荐***************/
let getBannerData =()=>{
    let url =//url是在网络开发者工具网络请求中获得  如掉官网后添加你的接口
    "/hehe/music/api/getTopBanner?g.........";
   return new Promise((resolve,rejct)=>{
        axios.get(url)
        .then((res)=>{ 
            resolve(res)
    })
    .catch((err)=>{
        rejct(err)
    })
   })
} 

创建一个axios

import Swiper from 'swiper'
export default {
  props:{
    'banners':{ type :Array ,default:[] }
  },
  methods:{
    initBanner(){
      new Swiper('.swiper-container',{})
    }
  },
  watch:{
    banners(){
      //banners 改变 网络请求数据ok 之后进行初始化操作
      this.$nextTick(()=>{
        this.initBanner()
      })
    }
  }
 
}

编写请求拦截器

//请求拦截器  发起请求前对请求参数做拦截处理
axios.interceptors.request.use(function (config) {
  return config;
}, function (error) {
  return Promise.reject(error);
});

响应拦截器

//响应拦截器  接受到数据的时候对数据进行处理
axios.interceptors.response.use(function (response) {
  console.log('响应拦截器')
  return response.data;
}, function (error) {
  return Promise.reject(error);
});

把实例导出就行了

export default axios

在需要的时候就可以使用了

临时写的没有整理各位大神见笑了，而且第一次写所以很乱抱歉，xixi