共计 1352 个字符,预计需要花费 4 分钟才能阅读完成。
接口交互开发是做为一个互联网产品必定要面对的事件。
记得之前去一家公司看打到过老代码,在一个 Service 文件夹下,全部都是将 API 地址封装成了一个一个办法。
export const getOneInfo = () => {return axios.get('/one/info')
}
export const getTwoInfo = () => {return axios.get('/two/info')
}
// ...
可能他们是感觉为了封装成 service 而后反复利用这个申请。
然而反而带来几个问题
- 新增接口就须要手动生成一大坨模板代码,真正有用的其实就是不一样的接口地址而已。
- 接口批改之后,办法名要么跟着变,要么就和接口地址呈现不一样。
@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>
正文完