乐趣区

关于前端:zeessuservice-让请求更容易

jiezi

接口交互开发是做为一个互联网产品必定要面对的事件。
记得之前去一家公司看打到过老代码，在一个 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>
退出移动版