Вам нужны некоторые данные для вашего нового проекта, и независимо от технологии, которую вы собираетесь использовать, создание API не всегда просты, или вы просто не хотите ждать, пока команда бэк -энд разоблачит для вас конечные точки. Одним из решений является издеваться над API, а насмешка – это не что иное, как имитирование ответа сервера. Вот набросок идеи:
Объяснение:
Всякий раз, когда мы делаем HTTP -запрос, функция будет проверять, в какой среде мы находимся, и исходя из того, что она вернет реальные или издевательные данные.
Среда может быть определена различными способами, но для этого примера мы переключаем ее с помощью строки запроса URL на нашем выборе:
http://localhost:8080/mockapi.html?dev= истинный
Соответствующая часть URL – это ? dev = true Но это может быть все, что мы хотим: ? Mock = true , ? Микки Маус , ? Sendnudes , так далее. Пример:
http://localhost:8080/mockapi.html?mickeymouse&handsome= истинный
Давай построим что -нибудь
Для простоты мы будем избегать фреймворков и зависимостей, но мы рассмотрим https://jsonplaceholder.typicode.com/posts/ Как наша «настоящая» конечная точка API. Если вы не знали, https://jsonplaceholder.typicode.com это «фальшивый онлайн -API REST для тестирования и прототипирования», который очень удобен, когда вам нужны некоторые данные в формате JSON. Единственным недостатком является то, что вы не можете действительно удалить или изменить что -либо Но вы получите фальшивый ответ на такие попытки.
Функция перехвата
Это «мозг» нашего фиктивного API, и одной этой функции будет достаточно, чтобы издеваться над любым запросом, но потому что для многих людей (включая меня), сделав практический пример, более полезно, мы собираемся создать очень простой проект (например, очень , очень, очень просто). В нашем проекте мы собираемся получить и отобразить список статей, мы собираемся опубликовать новые статьи, и мы собираемся удалить статьи.
Мы будем называть эту функцию всякий раз, когда хотим сделать запрос, и она будет действовать как переключение между макетными данными и реальными данными:
function makeRequest() {
const env = window.location.href.indexOf('dev=true') > -1
? 'development'
: 'production';
if(env === 'development') {
environmentSticker.innerHTML = `
`;
return new MockAPI();
} else {
environmentSticker.innerHTML = `
`;
return new RealAPI();
}
}
const.location.href.indexof (‘dev = true’)> -1
Эта строка кода определяет, является ли dev = true Строка присутствует в текущем URL -адресе документа. if (env) Затем все запросы будут перенаправлены на наш макет API в противном случае на настоящий API.
Realapi () это функция конструктора, которая позволит нам сделать пользовательский запрос. В этом примере я решил использовать Fetch API То, что я хотел избежать зависимостей, но вы можете использовать все, что хотите (Axios – это потрясающее).
function RealAPI() {
this.$fetch = async (url, config = {}) => {
const realData = await fetch(url, config);
const response = await realData.json();
return response;
}
}
Mockapi () также является функцией конструктора, и здесь мы издеваются над запросами и ответами.
function MockAPI() {
this.$fetch = async (url, config = {}) => {
switch(config.method) {
case undefined:
case 'GET':
await delay(1000);
return await mockData;
case 'POST':
if(config.body) {
const newEntry = JSON.parse(config.body);
mockData.unshift(newEntry);
updateArticles(mockData);
return await {};
} else {
console.log('body is missing');
break;
}
case 'DELETE':
const articleId = parseInt(url.substring(url.lastIndexOf('/') + 1));
mockData = mockData.filter(article => article.id !== articleId);
updateArticles(mockData);
return await {};
}
}
}
$ fetch Метод является нашим прокси для HTTP -запросов. Если аргумент конфигурации не присутствует, мы предполагаем, что это Получить Http -запрос иначе это метод, указанный в config.method (Проверьте Получить документацию API на MDN ). Поскольку мы хотим, чтобы наш пользовательский интерфейс обрабатывал ошибки и задержки, здесь мы можем издеваться над ошибками возврата и отсроченных ответов. Это в значительной степени.
Я попытался наметить основные функции, но в конце статьи вы найдете ссылку на исходный код, который вы можете изучить более подробно, а также ссылку на пример живого.
Вот скриншот приложения:
ВЫПОЛНЕНО!
Теперь вы можете подделать свой собственный API, но самое приятное то, что вы можете иметь полный контроль над ним.
Полный код можно увидеть здесь: https://repl.it/@irosgrim/StormyDevotedVirtualmemory
Ихмальный API: https://stormydevotedvirtualmemory-irosgrim.repl.co/?dev=true
«Реал» API: https://stormydevotedvirtualmemory-irosgrim.repl.co/
Большое спасибо всем людям, которые нашли смелость поделиться своими знаниями и страстью через статьи и учебные пособия. Вы помогли мне больше, чем когда -либо узнаете!
Вы нашли какие -либо ошибки в моем примере? Извините за это, я постараюсь лучше в следующий раз.
Оригинал: “https://dev.to/irosgrim/no-api-fake-it-until-you-make-it-2mbh”