怎么写接口请求？@zeesuu/service来帮你。

接口交互开发是做为一个互联网产品肯定要面对的事情。
记得之前去一家公司看打到过老代码，在一个Service文件夹下，全部都是将API地址封装成了一个一个方法。

export const getOneInfo = () => {
    return axios.get('/one/info')
}

export const getTwoInfo = () => {
    return axios.get('/two/info')
}

// ...

可能他们是觉得为了封装成service然后重复利用这个请求。
但是反而带来几个问题

1. 新增接口就需要手动生成一大坨模板代码，真正有用的其实就是不一样的接口地址而已。
2. 接口修改之后，方法名要么跟着变，要么就和接口地址出现不一样。

@zeesuu/service 可以将接口封装简化，也减少上面的问题出现。

$ npm install @zeesuu/service -S

// main.js
import ZeesuuService from ' @zeesuu/service';

// 将所有的API统一管理
const APIs = [
// 格式为: apiUrl | method | alias

// apiUrl 为必填, method 不填时默认为get, alias 选填
'/user/login|post|UserLoginFunction',

// 默认get 方法
'/user/info',

// 这个例子只有apiUrl和alias,method部分默认为get,但是要给到两个竖线作为分隔
'/user/list||AllUserList',

// 这个例子适合RESTful的url设计
'/video/upload/(id)/delete/(pid)|post',

// 这个例子适合配置其他域名下的请求地址
'http://www.xyz.com/aaa/bbb',
'https://www.xyz.com/ccc/ddd',
];

// 配置
Vue.use(ZeesuuService, {
  $http: axios, //自己封装好的请求对象

  apis: APIs,

  // 可选配置项, 默认是''。 依据$http配置的请求对象来
  appRoot: 'http://www.xyz.com/',

  // 可选配置, 默认是false, 小程序的请求参数结构和axios不一样。
  isMini: true,

  // 打开调试,可以显示所有已经转换的service
  debug: true,
});

<tempalte>
...
</template>

<script>
   export default {
      mounted() {
        // 使用@zeesuu/service后
        
        // APIs中的 '/user/login|post|UserLoginFunction', 自动封装成以下方法
        this.$service.UserLoginFunction({})
            .then(res => {})
            .catch(err => {})
        
        // APIs中的 '/user/Info'自动封装成以下方法
        this.$service.UserInfo()
            .then(() => {})
            .catch(err => {})
        
        // 使用绝对路径的API配置转化，注意 https/http
        this.$service.HttpAaaBbb()
        this.$service.HttpsCccDdd()
      }
   }
</scritp>