原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666

需求：

项目中难免有多个http请求，如果分散在各个页面中，对于查看和修正都极其不便，所以想对他们进行集中管理；

分析：

思路1：做一个普通的service，用文件http.api.js集中存放http请求，然后在需要做http请求的页面引入这个文件；
思路1问题：需求可以实现，问题在于每个页面都要引用一次，相对麻烦；
思路2：用文件http.api.js集中存放http请求，然后将这个服务注册到vue的原型对象中去，名称可以是$api($字符用于标识此方法为vue原型对象方法)；
思路2优点：不需要重复引入，直接this.$api.某个请求名，就可以使用；

实现：

(这里只讲思路2的实现)

1，创建http.api.js文件，在文件中依照普通service方法写好请求信息，这里只做了一个实例，API对象里面其实可以分类(对应项目各个模块)添加多个请求：

const API = {  
  // 首页资讯请求  
  homeInfo: 'http://127.0.0.1/main.php'}
export default API ;

2，在main.js中注册这个服务到vue的原型对象中去：

// 引入axios---这部分不清楚的参考我的如下博文
// [配置]vue axios配置，地址如下： 
// https://blog.csdn.net/tom_wong666/article/details/83833582
import axios from 'axios'
// 引入网络请求api
import API from '@/page/http/http.api'
Object.defineProperties(Vue.prototype, {
  // 注册axios请求为vue的原型对象，名称为$http  
  $http: {    
    value: axios,
    writable: false
  },  
  // 注册http请求api为vue的原型对象，名称为$api  
  $api: {    
    value: API, 
    writable: false
  }
})

3，在需要的页面中使用：

async fetch(){
  / /数据请求计数
  this.num+=1;   
  //请求数据      
  const res = await this.$http.post(this.$api.homeInfo+'?cid='+this.num)
  // 下面关于请求回来的res数据处理，非本文阐述的内容，所以省略
}

4，验证：
此设置已验证OK，需要看源码的同学，可以克隆如下项目查看：
demo的github地址：https://github.com/tom-wong666/xiaoa.git