接口交互開發是做為一個互聯網產品肯定要面對的事情。
記得之前去一家公司看打到過老代碼,在一個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>