技術標籤：Vuevue.js

用vue專案開發，把請求介面資料的外掛axios封裝，方便多人開發，也方便以後管理。

1、首先安裝vue專案：

1)cnpm i -g vue-cli //安裝全域性vue-cli腳手架

2)vue init webpack vueAxios(專案資料夾名) 

3)cd vueAxios（專案名）

4)cnpm i

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 = {
    ws: 'http://111.0.0.1:8001'
}

export default base

7、在apis.js裡集中寫專案需要的介面請求

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

const API = {
    wsDemo() {
        return axios.get(`${base.ws}/api/role` );
    }
}

export default API;

8、把彙總了所有介面的apis.js引入到main.js裡，並掛載到vue原型上：

import API from './request/apis'
Vue.prototype.$API = API;

此時main.js程式碼如下：

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

Vue.config.productionTip = false

Vue.prototype.$axios = axios;
Vue.prototype.$API = API;

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.ws()//$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>