停止編寫 API函數(shù)原因示例分析
正文
RESTFUL API 通常提供在不同實(shí)體上執(zhí)行增刪改查（CRUD）操作的一組接口。我們通常在我們的前端項(xiàng)目中為這些每一個(gè)接口提供一個(gè)函數(shù)，這些函數(shù)的功能非常的相似，只是為了服務(wù)于不用的實(shí)體。舉個(gè)例子，假設(shè)我們有這些函數(shù)。
// api/users.js
// 創(chuàng)建
export function createUser(userFormValues) {
return fetch('users', { method: 'POST', body: userFormValues });
}
// 查詢
export function getListOfUsers(keyword) {
return fetch(`/users?keyword=${keyword}`);
}
export function getUser(id) {
return fetch(`/users/${id}`);
}
// 更新
export updateUser(id, userFormValues) {
return fetch(`/users/${is}`, { method: 'PUT', body: userFormValues });
}
// 刪除
export function removeUser(id) {
return fetch(`/users/${id}`, { method: 'DELETE' });
}
類似的功能可能存在于其他實(shí)體，例如：城市、產(chǎn)品、類別...但是我們可以用一個(gè)簡單的函數(shù)調(diào)用來代替這些函數(shù)：
// apis/users.js
export const users = crudBuilder('/users');
// apis/cities.js
export const cities = crudBuilder('/regions/cities');
然后像這樣去使用：
users.create(values);
users.show(1);
users.list('john');
users.update(values);
users.remove(1);
你可能會問為什么？有一些很好的理由：
- 減少了代碼行數(shù)：你編寫的代碼，和當(dāng)你離開公司時(shí)其他人維護(hù)的代碼
- 強(qiáng)制執(zhí)行 API 函數(shù)的命名約定，這可以增加代碼的可讀性和可維護(hù)性。例如你已經(jīng)見過的函數(shù)名稱:
getListOfUsers,getCities,getAllProducts,productIndex,fetchCategories等, 他們都在做相同的事情，那就是“獲取實(shí)體列表”。使用這種方法，你將始終擁有entityName.list()函數(shù)，并且團(tuán)隊(duì)中的每個(gè)人都知道這一點(diǎn)。
所以，讓我們創(chuàng)建crudBuilder()函數(shù)，然后再添加一些糖。
一個(gè)非常簡單的 CRUD 構(gòu)造器
對于上邊的簡單示例，crudBuilder()函數(shù)將非常簡單：
export function crudBuilder(baseRoute) {
function list(keyword) {
return fetch(`${baseRoute}?keyword=${keyword}`);
}
function show(id) {
return fetch(`${baseRoute}/${id}`);
}
function create(formValues) {
return fetch(baseRoute, { method: 'POST', body: formValues });
}
function update(id, formValues) {
return fetch(`${baseRoute}/${id}`, { method: 'PUT', body: formValues });
}
function remove(id) {
return fetch(`${baseRoute}/${id}`, { method: 'DELETE' });
}
return {
list,
show,
create,
update,
remove
};
}
假設(shè)約定 API 路徑并且給相應(yīng)實(shí)體提供一個(gè)路徑前綴，他將返回該實(shí)體上調(diào)用 CRUD 操作所需的所有方法。
但老實(shí)說，我們知道現(xiàn)實(shí)世界的應(yīng)用程序并不會那么簡單。在將這種方法應(yīng)用于我們的項(xiàng)目時(shí)，有很多事情需要考慮：
- 過濾：列表 API 通常會提供許多過濾器參數(shù)
- 分頁：列表 API 總是分頁的
- 轉(zhuǎn)換：API 返回的值在實(shí)際使用之前可能需要進(jìn)行一些轉(zhuǎn)換
- 準(zhǔn)備：
formValues對象在發(fā)送給 API 之前需要做一些準(zhǔn)備工作 - 自定義接口：更新特定項(xiàng)的接口不總是
${baseRoute}/${id}
因此，我們需要可以處理更多復(fù)雜場景的 CRUD 構(gòu)造器。
高級 CRUD 構(gòu)造器
讓我們通過上述方法來構(gòu)建一些日常中我們真正使用的東西。
過濾
首先，我們應(yīng)該在 list輸出函數(shù)中處理更加復(fù)雜的過濾。每個(gè)實(shí)體列表可能有不同的過濾器并且用戶可能應(yīng)用了其中的一些過濾器。因此，我們不能對應(yīng)用過濾器的形狀和值有任何假設(shè)，但是我們可以假設(shè)任何列表過濾都可以產(chǎn)生一個(gè)對象，該對象為不同的過濾器名稱指定了一些值。例如，我們可以過濾一些用戶：
const filters = {
keyword: 'john',
createdAt: new Date('2020-02-10')
};
另一方面，我們不知道這些過濾器應(yīng)該如何傳遞給 API，但是我們可以假設(shè)（跟 API 提供方進(jìn)行約定）每一個(gè)過濾器在列表 API 中都有一個(gè)相應(yīng)的參數(shù)，可以以'key=value'URL 查詢參數(shù)的形式被傳遞。
因此我們需要知道如何將應(yīng)用的過濾器轉(zhuǎn)換成相對應(yīng)的 API 參數(shù)來創(chuàng)建我們的 list 函數(shù)。這可以通過將 transformFilters 參數(shù)傳遞給 crudBuilder() 來完成。舉一個(gè)用戶的例子：
function transformUserFilters(filters) {
const params = [];
if (filters.keyword) {
params.push(`keyword=${filters.keyword}`);
}
if (filters.createdAt) {
params.push(`create_at=${dateUtility.format(filters.createdAt)}`);
}
return params;
}
現(xiàn)在我們可以使用這個(gè)參數(shù)來創(chuàng)建 list 函數(shù)了。
export function crudBuilder(baseRoute, transformFilters) {
function list(filters) {
let params = transformFilters(filters)?.join('&');
if (params) {
params += '?';
}
return fetch(`${baseRoute}${params}`);
}
}
轉(zhuǎn)換和分頁
從 API 接收的數(shù)據(jù)可能需要進(jìn)行一些轉(zhuǎn)換才能在我們的應(yīng)用程序中使用。例如，我們可能需要將 snake_case 轉(zhuǎn)換成駝峰命名或?qū)⒁恍┤掌谧址D(zhuǎn)換成用戶時(shí)區(qū)。
此外，我們還需要處理分頁。
我們假設(shè)來自 API 的分頁數(shù)據(jù)都按照如下格式（與 API 提供者約定）：
{
data: [], // 實(shí)體對象列表
pagination: {...} // 分頁信息
}
因此，我們需要知道如何轉(zhuǎn)換單個(gè)實(shí)體對象。然后我們可以遍歷列表對象來轉(zhuǎn)換他們。為此，我們需要一個(gè) transformEntity 函數(shù)作為 crudBuilder 的參數(shù)。
export function crudBuilder(baseRoute, transformFilters, transformEntity, ) {
function list(filters) {
const params = transformFilters(filters)?.join('&');
return fetch(`${baseRoute}?${params}`)
.then((res) => res.json())
.then((res) => ({
data: res.data.map((entity) => transformEntity(entity)),
pagination: res.pagination
}));
}
}
list() 函數(shù)我們就完成了。
準(zhǔn)備
對于 create 和 update 函數(shù)，我們需要將 formValues 轉(zhuǎn)換成 API 需要的格式。例如，假設(shè)我們在表單中有一個(gè) City 的城市選擇對象。但是 create API 只需要 city_id。因此，我們需要一個(gè)執(zhí)行以下操作的函數(shù)：
const prepareValue = formValue => ({city_id: formValues.city.id});
這個(gè)函數(shù)會根據(jù)用例返回普通對象或者 FormData，并且可以將數(shù)據(jù)傳遞給 API：
export function crudBuilder(baseRoute, transformFilters, transformEntity, prepareFormValues) {
function create(formValues) {
return fetch(baseRoute, {
method: 'POST',
body: prepareFormValues(formValues)
});
}
}
自定義接口
在一些少數(shù)情況下，對實(shí)體執(zhí)行某些操作的 API 接口不遵循相同的約定。例如，我們不能使用 /users/${id} 來編輯用戶，而是使用 /edit-user/${id}。對于這些情況，我們應(yīng)該指定一個(gè)自定義路徑。
在這里我們允許覆蓋 crud builder 中使用的任何路徑。注意，展示、更新、移除操作的路徑可能取決于具體實(shí)體對象的信息，因此我們必須使用函數(shù)并傳遞實(shí)體對象來獲取路徑。
我們需要在對象中獲取這些自定義路徑，如果沒有指定，就退回到默認(rèn)路徑。像這樣：
const paths = {
list: 'list-of-users',
show: (userId) => `users/with/id/${userId}`,
create: 'users/new',
update: (user) => `users/update/${user.id}`,
remove: (user) => `delete-user/${user.id}`
};
最終的 BRUD 構(gòu)造器
這是創(chuàng)建 CRUD 函數(shù)的最終代碼。
export function crudBuilder(baseRoute, transformFilters, transformEntity, prepareFormValues, paths) {
function list (filters) {
const path = paths.list || baseRoute;
let params = transformFilters(filters)?.join('&');
if (params) {
params += '?';
}
return fetch(`${path}${params}`)
.then((res) => res.json())
.then(() => ({
data: res.data.map(entity => transformEntity(entity)),
pagination: res.pagination
}));
}
function show(id) {
const path = paths.show?.(id) || `${baseRoute}/${id}`;
return fetch(path)
.then((res) => res.json())
.then((res => transformEntity(res)));
}
function create(formValues) {
const path = paths.create || baseRoute;
return fetch(path, { method: 'POST', body: prepareFormValues(formValues) });
}
function update(id, formValues) {
const path = paths.update?.(id) || `${baseRoute}/${id}`;
return fetch(path, { method: 'PUT', body: formValues });
}
function remove(id) {
const path = paths.remove?.(id) || `${baseRoute}/${id}`;
return fetch(path, { method: 'DELETE' });
}
return {
list,
show,
create,
update,
remove
}
}
Saeed Mosavat: Stop writing API functions
以上就是停止編寫 API函數(shù)原因示例分析的詳細(xì)內(nèi)容，更多關(guān)于停止編寫 API 函數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
微信小程序 HTTPS報(bào)錯(cuò)整理常見問題及解決方案
這篇文章主要介紹了微信小程序 HTTPS報(bào)錯(cuò)常見問題及解決方案的相關(guān)資料,需要的朋友可以參考下2016-12-12
JavaScript策略模式利用對象鍵值的映射關(guān)系詳解
這篇文章主要為大家介紹了JavaScript策略模式利用對象鍵值的映射關(guān)系詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
TypeScript順時(shí)針打印矩陣實(shí)現(xiàn)實(shí)例詳解
這篇文章主要為大家介紹了TypeScript順時(shí)針打印矩陣實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
瀏覽器切換到其他標(biāo)簽頁或最小化js定時(shí)器是否準(zhǔn)時(shí)測試
這篇文章主要為大家介紹了瀏覽器切換到其他標(biāo)簽頁或最小化是js定時(shí)器是否準(zhǔn)時(shí)的測試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
微信小程序 flex實(shí)現(xiàn)導(dǎo)航實(shí)例詳解
這篇文章主要介紹了微信小程序 flex實(shí)現(xiàn)導(dǎo)航實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
微信小程序 image組件binderror使用例子與js中的onerror區(qū)別
這篇文章主要介紹了微信小程序 image組件binderror使用例子與js中的onerror區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-02-02
JS中的every()對空數(shù)組總返回true原理分析
這篇文章主要為大家介紹了JS中的every()對空數(shù)組總返回true原理分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要為大家介紹了Web Worker線程解決方案electron踩坑記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
腳本整合指定文件/文件夾執(zhí)行定制化ESLint命令使用實(shí)例
這篇文章主要為大家介紹了腳本整合指定文件/文件夾執(zhí)行定制化?ESLint命令使用實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
利用前端HTML+CSS+JS開發(fā)簡單的TODOLIST功能（記事本）
這篇文章主要介紹了用HTML+CSS+JS做出簡單的TODOLIST（記事本）項(xiàng)目,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考下2021-04-04