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>