Автор оригинала: Carter Capocaccia.
Когда вы пишете передний конец для приложения и выполнение вызовов HTTP API, вы можете соблазнить поставить маршрут API, который вы звоните в поле зрения. Не делай этого. В конце концов, к тому времени, когда вы закончите с вашим приложением, вы, вероятно, будете делать вызова API в нескольких компонентах. Когда маршрут API меняется, вам придется вернуться назад и изменить каждую ссылку на URL API.
Вместо этого подумайте о том, чтобы сделать свой собственный передний API API с помощью объекта Config js, как следующее, использующее свой собственный пользовательский экземпляр Axios. Это позволит нам использовать один файл конфигурации, который содержит маршруты для заднего API.
Вот пример.
В файле JS давайте назовем его «Eventservice.js», мы можем создать следующее:
//here we are importing our Axios dependency
import axios from 'axios'
//here is where we are defining our custom axios instance.
//if all of your API routes come from the same location, or you are using a web proxy to hit the server, you can provide a base url
//you can also attach axios interceptors to custom axios instances as well
const apiClient = axios.create({
baseURL: 'v1/'
})
//Now set up the routes. We are going to export a default object with keys that keep our API routes organized. For example, all of the auth routes live in the Auth object
export default {
auth: {
userLogin(payload) {
return apiClient.post('/auth/login/', payload)
},
userAliveAndActive() {
return apiClient.post('/auth/check/')
},
userLogout() {
return apiClient.post('/auth/logout/')
},
generateResetToken(payload) {
return apiClient.post('/auth/generate_reset_token/', payload)
},
resetPassword(payload) {
return apiClient.post('/auth/reset_password/', payload)
}
}
}
Поэтому для доступа к этим маршрутам API в передней части вашего приложения вы можете сделать следующее:
import eventService from '../pathToFile/eventService'
//even without knowing the back end API, I can tell that this API call is making a request to auth to log the user in. Its clear, clean, and easy to understand what is happening.
eventService.auth.userLogin({
username: 'JohnSmith',
password: 'abc123'
})
.then((rsp) => {
// if you want to have one result across the app for an action, you can handle the result of this promise inside of the eventService.js file. This will allow you to provide repeatable functioanlity across your app for events that will be used often.
//if the event will need custom functionality, simply return the promise from the eventService.js file and handle it in the component
})
.catch((err) => {
// handle your error here
})
Так что теперь независимо от того, где вы находитесь в вашем приложении, вы можете ссылаться на ваш собственный API переднего конца, который отображает на задней панели API. Это позволит вам вносить изменения в одном месте, если переход на маршрут заднего конца изменения, и он позволит вам получить доступ к любым новым маршрутам API, добавленным просто добавлением маршрута в экспортированный объект по умолчанию.
Полное раскрытие, я пишу это как разработчик Vue, поэтому это может хорошо работать с вашим приложением, но для большинства компонентных архитектур JS должна быть повторяется.