vue项目中的axios封装

用vue项目开发，把请求接口数据的插件axios封装，方便多人开发，也方便以后管理。

1、首先安装vue项目：　　

1)cnpm i -g vue-cli //安装全局vue-cli脚手架

2)vue init webpack vueAxios(项目文件夹名) 

3)cd vueAxios（项目名）

4)cnpm i

 

demo项目的目录如下：

 

安装axios 

2、安装axios：　　

1）cnpm i axios 或者  淘宝镜像： cnpm i axios
2）src =》main.js里面引入安装好的axios：import axios from 'axios'
3）把axios挂载在vue原型上：Vue.prototype.$axios = axios;

如下图：

　　　　

 

 

 

3、vue解决解决跨越的问题：配置config =》index.js =》proxyTable　　

'/api': {
     target: 'http://localhost:7001/',
     changeOriginL: true,
     pathRewrite: {
        '^/api': '/api'
     }
 }

 

开始封装axios

4、在src目录下建新文件夹：request，然后在此文件夹下分别建三个js文件：

　　　　配置axios的$http.js、配置多个baseURL域名的base.js、集中项目所有接口的apis.js(方便多人开发，以后管理)

　　

5、在刚刚新建的$http.js里面配置axios的请求拦截　　

import axios from 'axios'
import QS from 'qs'


// 请求超时时间
axios.defaults.timeout = 1000 * 10;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 设置公共url
//axios.defaults.baseURL = 'http://127.0.0.1:7001'

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  console.log(config);
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  console.log(error);
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  console.log(response);
  // 对响应数据做点什么
  return response;
}, function (error) {
  console.log(error);
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default axios

 

6、在base.js自由配置多个项目需要的baseURL　　

const base = {
    egg: 'http://127.0.0.1:7001'
}

export default base

 

7、在apis.js里集中写项目需要的接口请求　

import axios from './$http'
import base from './base'
import QS from 'qs'

const demo = {
    eggDemo() {
        return axios.get(`${base.egg}/api/role` );
    }
}

export default demo;

 

8、把汇总了所有接口的apis.js引入到main.js里，并挂载到vue原型上：　　

import demo from './request/apis'

  Vue.prototype.$api = demo;

　　此时main.js代码如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import QS from 'qs'
import demo from './request/apis'

Vue.config.productionTip = false

Vue.prototype.$axios = axios;
Vue.prototype.$api = demo;

Vue.use(QS);//,request


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

9、在HelloWorld.vue这个页面请求接口　　

<template>
  <div class="hello">
    <div class="show_data">
      <button @click="clickShowData">加载数据</button>
      <div class="show_box">{{ data }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
        data: ''
    }
  },
  methods: {
    clickShowData() {
      this.$api.eggDemo()//$api在main.js里已经引入到vue的原型上，不需要在引入就可以通过this.$api直接使用
        .then(res => {
          _this.data = res;
        }).catch(err => {
          _this.data = err;
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>