在vue项目中，我们通常都是使用axios与后台进行数据交互，axios有很多好用的特性，这里不多做介绍，相关细节可以查阅axios中文网。在对axios进行封装之前，我们要使用vue脚手架工具创建一个vue项目（这里我用的是cli4）。

安装

  1. cnpm install axios --save-dev; // 安装axios
  2. cnpm install qs --save-dev; // 安装qs模块，用来序列化post类型的数据，否则后端无法接收到数据

模块引入

在src目录下创建一个service目录，用于存放接口封装的相关文件。然后在service目录中创建service.js，用于axios、qs模块的引入，并在此文件中对axios进行封装。

  1. import axios from 'axios'    //引入axios
  2. import qs from 'qs'    //引入qs，用来序列化post类型的数据，否则后端无法接收到数据
  3. // 设置post请求头
  4. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
  5. axios.defaults.withCredentials = false;//在跨域请求时，不会携带用户凭证；返回的 response 里也会忽略 cookie
  7. //创建axios实例，请求超时时间为300秒
  8. const instance = axios.create({
  9.   timeout: 300000,
  10. });
  12. //请求和响应拦截可以根据实际项目需求进行编写
  13. // 请求发起前拦截
  14. instance.interceptors.request.use((config) => {
  15.   //这里可以对接口请求头进行操作 如：config.headers['X-Token'] = token
  16.   console.log("请求拦截",config);
  17.   return config;
  18. }, (error) => {
  19.   // Do something with request error
  20.   return Promise.reject(error)
  21. })
  23. // 响应拦截（请求返回后拦截）
  24. instance.interceptors.response.use(response => {
  25.   console.log("响应拦截",response);
  26.   return response;
  27. }, error => {
  28.   console.log('catch', error)
  29.   return Promise.reject(error)
  30. })
  32. //按照请求类型对axios进行封装
  33. const api={
  34.   get(url,data){
  35.     return instance.get(url,{params:data})
  36.   },
  37.   post(url,data){
  38.     return instance.post(url,qs.stringify(data))    
  39.   }, 
  40. }
  41. export {api}

上述代码是接口域名只有一个的情况（多数情况），当接口域名有多个的时候（少数情况），我们需要对之前的封装进行改造，代码如下：

  1. import axios from 'axios'    //引入axios
  2. import qs from 'qs'    //引入qs，用来序列化post类型的数据，否则后端无法接收到数据
  3. // 设置post请求头
  4. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
  5. axios.defaults.withCredentials = false;//在跨域请求时，不会携带用户凭证；返回的 response 里也会忽略 cookie
  7. //创建axios实例，请求超时时间为300秒，因为项目中有多个域名，所以对应的也要创建多个axios实例
  8. const instanceA = axios.create({
  9.   timeout: 300000,
  10. });
  11. const instanceB = axios.create({
  12.   timeout: 300000,
  13. });
  15. //如果项目为单一域名，这里可以不用进行配置，当项目接口有多个域名时，要对axios实例基础路径进行配置，否则在项目生产环境中无法进行区别调用
  16. if (process.env.NODE_ENV == 'production') {
  17.     instanceA.defaults.baseURL = 'https://www.production_a.com';
  18.     instanceB.defaults.baseURL = 'https://www.production_b.com';
  19. }
  21. //请求和响应拦截可以根据实际项目需求进行编写
  22. // 请求发起前拦截
  23. instanceA.interceptors.request.use((config) => {
  24. //这里可以对接口请求头进行操作 如：config.headers['X-Token'] = token
  25.   console.log("请求拦截",config);
  26.   return config;
  27. }, (error) => {
  28.   // Do something with request error
  29.   return Promise.reject(error)
  30. })
  31. instanceB.interceptors.request.use((config) => {
  32.   console.log("请求拦截",config);
  33.   return config;
  34. }, (error) => {
  35.   // Do something with request error
  36.   return Promise.reject(error)
  37. })
  39. // 响应拦截（请求返回后拦截）
  40. instanceA.interceptors.response.use(response => {
  41.   console.log("响应拦截",response);
  42.   return response;
  43. }, error => {
  44.   console.log('catch', error)
  45.   return Promise.reject(error)
  46. })
  47. instanceB.interceptors.response.use(response => {
  48.   console.log("响应拦截",response);
  49.   return response;
  50. }, error => {
  51.   console.log('catch', error)
  52.   return Promise.reject(error)
  53. })
  55. //按照请求类型对axios进行封装
  56. const api={
  57.     get(url,data){
  58.     return instanceA.get(url,{params:data})
  59.     },
  60.     post(url,data){
  61.     return instanceA.post(url,qs.stringify(data))    
  62.     },
  63.     doGet(url,data){
  64.     return instanceB.get(url,{params:data})
  65.     },
  66.     doPost(url,data){
  67.     return instanceB.post(url,qs.stringify(data))    
  68.     }    
  69. }
  70. export {api}

上述代码中有根据生产环境对axios实例的基础路径进行配置，如果项目中有多个环境（如：测试环境等），则需要对CLI4脚手架环境变量进行配置

api接口统一管理

将api接口按照功能模块进行拆分，把同一模块下的接口写在同一个文件中进行统一管理，这样代码会更容易维护。比如我们的项目中有新闻模块，音乐模块等。我们就在serviec目录中创建news.js、music.js文件，用于管理各自模块的所有api接口，这里我只拿news.js文件为例，代码如下：

  1. import {api} from "./service.js";    
  2. const news={
  3.     getNewsList(){//获取新闻列表
  4.         return api.get("api/news/getNewsList")
  5.     },
  6.     editNewsDetail(data){//修改新闻详情
  7.         return api.post("api/news/editNewsDetail",data);
  8.     }
  9. }
  10. export default news;

为了更方便在项目中调用这些封装好的接口，我们需要将这些接口挂载到vue的原型上，首先我们要在service目录中创建api.js文件，将所有模块的api管理文件引入进来，然后进行统一导出

  1. //引入相关api管理模块
  2. import news from "./news.js";
  3. //进行统一导出
  4. export default {
  5.     news
  6. }
  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  5. import axios from 'axios'
  6. Vue.prototype.axios=axios
  7. Vue.config.productionTip = false
  8. import api from "./service/api.js";
  9. //将封装的接口挂载到vue原型上
  10. Vue.prototype.$api = api;
  11. new Vue({
  12.   router,
  13.   store,
  14.   render: h => h(App)
  15. }).$mount('#app')

然后我们在项目创建完成时自动生成的模板文件App.vue调用封装好的接口

  1. <template>
  2.   <div id="app">
  3.     <div id="nav">
  4.     <router-link to="/">Home</router-link> |
  5.     <router-link to="/about">About</router-link>
  6.     <button @click="getN">接口封装getN</button>
  7.     <button @click="postN">接口封装postN</button>
  8.     </div>
  9.     <router-view/>
  10.   </div>
  11. </template>
  12. <script>
  14. export default {
  15.     methods:{
  16.         getN(){
  17.             this.$api.news.getNewsList().then((res)=>{
  18.                 console.log(res);
  19.             })
  20.         },
  21.         postN(){
  22.             let openid="oO5tQ5VMPpuzLqwfXhpmwjqwSANM";
  23.             let productCodes="pro-1337270496655446016";            
  24.             this.$api.news.editNewsDetail({openid,productCodes}).then((res)=>{
  25.                 alert(res.data.msg);
  26.             })
  27.         }
  28.     }    
  29. }
  30. </script>
  31. <style lang="scss">
  32. #app {
  33.   font-family: Avenir, Helvetica, Arial, sans-serif;
  34.   -webkit-font-smoothing: antialiased;
  35.   -moz-osx-font-smoothing: grayscale;
  36.   text-align: center;
  37.   color: #2c3e50;
  38. }
  40. #nav {
  41.   padding: 30px;
  43.   a {
  44.     font-weight: bold;
  45.     color: #2c3e50;
  47.     &.router-link-exact-active {
  48.       color: #42b983;
  49.     }
  50.   }
  51. }
  52. </style>

配置代理

因为我们要在本地环境进行测试，这就涉及到了跨域问题，为了解决跨域问题，我们可以进行代理的配置，在项目根目录中创建vue.config.js文件，然后可以对项目进行各种配置

  1. // vue.config.js
  2. module.exports = {
  3.   // 输出文件目录
  4.   outputDir: "dist",
  5.   // eslint-loader 是否在保存的时候检查
  6.   lintOnSave: false,
  7.   // 基本路径
  8.   publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  9.   devServer: {
  10.     host: "localhost",
  11.     port: 8080,
  12.     open: true,
  13.     hotOnly: true, // 热更新
  14.     // 设置代理
  15.     proxy: {
  16.       "/api": {
  17.         // 本地mock服务器
  18.         target: "https://www.xxxx.com/xxx/",
  19.         changeOrigin: true,
  20.         ws: false,                
  21.       },
  22.       //如果项目中存在多个域名接口，可依次进行配置
  23.     "/apib":{
  24.         target: "https://www.xxxx.com/xxx/",
  25.         changeOrigin: true,
  26.         ws: false,
  27.     },
  28.     }, 
  29.   },
  30. };

代理配置好了之后，就可以运行项目了，命令行中输入npm run serve, 项目启动好了之后，就可以进入页面点击按钮，测试之前做的封装是否好用。