Vue的axios插件实现GET、POST、JSONP请求，以及请求拦截

1.需要引入vue.js和axios.js(小编比较懒直接引用的bootstrap来做样式)

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>

2.在HTML中请求按钮

<div id="app" class="container">
  <h1>axios</h1>
      <a href="javascript:;" @click="get" class="btn btn-primary">GET请求</a>
      <a href="javascript:;" @click="post" class="btn btn-primary">POST请求</a>
      <a href="javascript:;" @click="http" class="btn btn-primary">http请求</a>
      <a href="javascript:;" @click="jsonp" class="btn btn-primary">jsonp请求</a><br><br>
  <span>
    <span>axios的http请求中method的传参：</span> <br><br>
    <span class="btn btn-success">post请求是通过data传递参数</span>
    <span class="btn btn-success">get请求是通过params传递参数</span>
  </span>
  <br>
  <span>{{msg}}</span>
</div>

3.这里就是重点啦！请求+拦截

<script>
  new Vue({
    el: '#app',
    data: {
      msg: ''
    },
    mounted: function () {
      axios.interceptors.request.use(function (config) {
        console.log('request init' + config);
        //可以添加请求前的 ---  Loading效果处理
        return config;
      });
      axios.interceptors.response.use(function (response) {
        console.log('response init' + response);
        //可以添加响应过后的 ---  效果处理
        return response;
      });
    },

    methods: {
      get: function () {
        axios.get('../package.json', {
          params: {
            userId: '105'
          },
          headers: {
            token: '123'
          },
          before: function () {
            console.log('before init');
          }
        }).then(res => {
          this.msg = res.data;
        }).catch(function (error) {
          console.log('error init' + error);
        })
      },
      post: function () {
        axios.post('../package.json', {
          userId: '333',
          headers: {
            token: 'Mr.wang'
          }
        }).then(res => {
          this.msg = res.data;
        })
      },
      http: function () {
        axios({
          url: '../package.json',
          method: 'get',
          data: {
            userId: '106'
          },
          headers: {
            token: 'http-test'
          }
        }).then(res => {
          this.msg = res.data;
          console.log(res.data);
        })
      },
      jsonp: function () {
        axios({
          headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Content-Type': 'application/json; charset=UTF-8',
            'Access-Control-Allow-Origin': '*'
          },//设置跨域请求头
          method: "POST",//请求方式
          url: "https://solelynet.com/public/index.php/api/v1/UserMenu/GetTree",//请求地址
          data: {
            "menu_id": 1,
            "thirdapp_id": 1//请求参数

          }
        })
          .then(function (res) {
            //返回值
            console.log(res.data);
            for (var i = 0; i < res.data.length; i++) {
              console.log(res.data[i].name)
            }
          })
          .catch(function (err) {
            console.log(err);
          });
      }
    }
  })
</script>