Организация работы с API на Vue.js, Виталий Копачёв

Организация работы с
API на Vue.js
Копачёв Виталий

В чем проблема?
● Пишут запросы в
компонентах
● Простыня кода
● Сложное тестирование
● Сложно поддерживать

export default {
name: 'AllCoursesPanel',
data() { return { loadingState: false}},
computed: {
...mapState('dashboard', ['availableCourses'])
},
methods: {
...mapActions('dashboard', [
'getAvailableCourses'
])
},
created() {
this.loadingState = true
axios.get('api/v1/user_courses/')
.then((resp) => {
this.$store
.commit('setAvailableCourses', resp.data)
})
.catch((error) => {
if (error.response.status === httpBadRequest) {
this.$store
.dispatch(
'common/errorMessage',
'errors.fetchCoursesError'
)
}
this.$store
.dispatch('common/errorMessage',
'errors.CommonError')
})
.finally(() => {
this.loadingState = false
})
}
}
export default {
computed: {
},
methods: {
])
},
created() {
this.getAvailableCourses().finally(() => {
})
}
}
Я Сын маминой...

export default {
computed: {
},
methods: {
])
},
created() {
axios.get('api/v1/user_courses/')
.then((resp) => {
this.$store
.commit('setAvailableCourses', resp.data)
})
.catch((error) => {
if (error.response.status === httpBadRequest) {
this.$store
.dispatch(
'common/errorMessage',
'errors.fetchCoursesError'
)
}
this.$store
.dispatch('common/errorMessage',
'errors.CommonError')
})
.finally(() => {
})
}
}
export default {
computed: {
},
methods: {
])
},
created() {
this.getAvailableCourses().finally(() => {
})
}
}
Получение и отображение смешаны Логика отделена от реализации

Чего хотим?
● Понятный код
● Управление кодом
● Удобное тестирование
● Параллельная работа с
кодом
● Конфигурация “в одном
месте”

● Три уровня абстракции
● Разделение зон ответственности
● Инкапсуляция логики
● Упрощение взаимодействия
К чему пришли

Запросы к
API
META
информация Data Recieving Отслеживание
Post
Processing
Pre
Processing
Уровень сервисов

Абстракции бизнес-логикиАбстракции бизнес-логики

Взаимосвязи уровней

Сервисы
Получение сырых
данных.
Обращение к внешним
АПИ.
Бизнес-логика.
Сущности.
Валидация уровня
предметной области.Вызов методов
Данные АПИ

/**
* Получение текущего курса.
*/
export async function getCurrentCourse({rootGetters, commit,
dispatch}, courseId) {
try {
const data = rootGetters.api.getCourse(courseId)
commit('setCurrentCourse', data)
} catch (err) {
dispatch('common/errorMessage', 'errors.fetchCoursesError',
{root: true})
throw Error(err)
}
}
/**
* Установка текущего курса
*/
export function setCurrentCourse(state, rawCourse) {
state.currentCourse = Course.produceCourse(rawCourse)
}
/**
* Модели дашборда
*/
export class Course {
constructor ({
uid,
name,
description = '',
image_1 = '',
destinationUrl
}) {
this.uid = uid
this.name = name
this.description = description
this.image_1 = image_1
this.destinationUrl = destinationUrl
}
static produceCourse (rawData) {
if (rawData.uid === undefined || rawData.uid === null) {
throw new Error('Bad course data: no data')
}
if (rawData.name === undefined || rawData.name === null) {
throw new Error('Bad course data: no name')
}
if (rawData.destinationUrl === undefined
&& rawData.destinationUrl === null) {
throw new Error('Bad course data: no destinationUrl')
}
return new this(rawData)
}
}

- Уровень рендеринга.
- Уровень компонентов.
Уровень отображения

Бизнес-логика.
Взаимодействие.
Поведение.
Алгоритмы.
Отображение.
Внешний вид конкретных
данных.
Логика отображения.Вызов действий.
Данные для
отображения

<template>
<div class="UserCoursesPanel">
<q-card v-for="course in availableCourses">
<q-card-section>
<div class="text-h6">{{ course.name }}</div>
</q-card-section>`
<q-card-section>{{ course.description }}</q-card-section>
<q-card-actions>
<q-btn color="info" @click="getCurrentCourse(course.uid)">Получить этот курс</q-btn>
</q-card-actions>
</q-card>
<q-btn color="info" @click="getCourses">Посмотреть курсы</q-btn>
</div>
</template>
<script>
import {mapActions, mapState} from 'vuex'
export default {
name: 'UserCoursesPanel',
computed: { ...mapState('dashboard', 'availableCourses')},
methods: {
...mapActions({
getCourses: 'dashboard/getUserCourses',
getCurrentCourse: 'dashboard/getCurrentCourse'
})
}
}
</script>
Уровень отображения

Сервисы
“Это уже не хамство. Однако все еще не сервис”
Довлатов С.

/**
* Получение списка доступных курсов пользователя
*/
export async function getAvailableCourses({rootGetters, commit, dispatch})
{
try {
const data = rootGetters.api.getCourses()
commit('setAvailableCourses', data)
} catch (err) {
dispatch('common/errorMessage', 'errors.fetchCoursesError', {root:
true})
throw Error(err)
}
}
Единый интерфейс общения с АПИ

Инкапсулированный функционал
Инициализация конфигурации.
Установка url ресурсов.
Подготовка текущего запроса.
Добавление хедеров.
Внутренняя обработки ответов на
отдельные запросы.
Общая логика выполнения
запросов.
Сервис АПИ

/**
* Объект-обертка над клиентом.
* Реализация REST
*/
class ApiClientClass {
constructor(options = {}) {
this.defaultHeaders = options.headers || {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
// Создание экземпляра клиента.
this.client = options.client ||
axios.create({
baseURL: process.env.API_URL ? process.env.API_URL : '',
headers: this.defaultHeaders
});
}
}
Инициализация конфигурации

this.client.interceptors.request.use(
/**
* Подготовка запроса
*/
config => {
if (!localStorage.getItem('tAccess')) {
return config
}
const newHeaders = {
...this.defaultHeaders,
Authorization: `Bearer ${localStorage.getItem('tAccess')}`
}
return {
...config,
headers: newHeaders
}
},
e => Promise.reject(e)
)
Подготовка текущего запроса

подготовка текущего запроса
this.client.interceptors.request.use(
/**
* Подготовка запроса
*/
config => {
if (!localStorage.getItem('tAccess')) {
return config
}
const newHeaders = {
...this.defaultHeaders,
Authorization: `Bearer ${localStorage.getItem('tAccess')}`
}
return {
...config,
headers: newHeaders
}
},
e => Promise.reject(e)
)
Подготовка текущего запроса

пост-обработка ответа
this.client.interceptors.response.use(
r => r,
async error => {
if (error.response && error.response.status === httpForbidden) {
this.removeTokens()
throw USER_UNAUTHORIZED
}
if (error.response && error.response.status === httpUnauthorized && !error.config.retry) {
try {
const {data} = await this.createRefreshRequest()
this.setTokens({
tAccess: data.access,
tRefresh: data.token
})
const newRequest = {
...error.config,
retry: true
}
return this.client(newRequest)
} catch (err) {
console.warn('')
throw err
} finally {
this.refreshRequest = null
}
}
throw error
}
)
Пост-обработка ответа

r => r,
async error => {
if (error.response && error.response.status === httpForbidden) {
this.removeTokens()
}
if (error.response && error.response.status === httpUnauthorized && !error.config.retry) {
try {
this.setTokens({
})
...error.config,
retry: true
}
} catch (err) {
console.warn('')
throw err
} finally {
}
}
throw error
}
)
Реакция на ошибку доступа

- Обработка неудачных запросов.
- Отдельная обработка для разных групп запросов.
- Повторное выполнение запросов после выполнения некоторых
действий
Что еще можно делать

конфигурация интерфейса.
/**
* URL'ы ресурсов бекенда
*/
export const BACKEND_ENDPOINTS = {
createToken: {method: 'post', url: 'api/v1/create_token/'},
updateToken: {method: 'put', url: 'api/v1/update_token/{token}/'},
refreshToken: {method: 'post', url: 'api/v1/refresh_token/'},
userCourses: {method: 'get', url: 'api/v1/user_courses/'},
verifyToken: {method: 'post', url: 'api/v1/verify_token/'},
getCourses: {method: 'get', url: 'api/v1/courses/'},
getCourse: {method: 'get', url: 'api/v1/courses/{courseId}'},
addCourse: {method: 'post', url: 'api/v1/courses'},
modifyCourse: {method: 'patch', url: 'api/v1/courses/{courseId}'},
fetchPracticePages: {method: 'get', url: 'api/v1/practice_pages/'},
attemptsLeft: {method: 'get', url: 'api/v1/quest_stat/attempts_left/'},
currentGitQuestAttempt: {method: 'get', url: 'api/v1/quest_stat/current/'},
startGitNewAttemptQuest: {method: 'post', url: 'api/v1/quest_stat/new_attempt/'},
finishGitNewAttemptQuest: {method: 'put', url: 'api/v1/quest_stat/finish/'}
}
Конфигурация интерфейса

/**
* URL'ы ресурсов бекенда
*/
export const BACKEND_ENDPOINTS = {
createToken: {method: 'post', url: 'api/v1/create_token/'},
updateToken: {method: 'put', url: 'api/v1/update_token/{token}/'},
refreshToken: {method: 'post', url: 'api/v1/refresh_token/'},
userCourses: {method: 'get', url: 'api/v1/user_courses/'},
verifyToken: {method: 'post', url: 'api/v1/verify_token/'},
getCourses: {method: 'get', url: 'api/v1/courses/'},
modifyCourse: {method: 'patch', url: 'api/v1/courses/{courseId}'},
fetchPracticePages: {method: 'get', url: 'api/v1/practice_pages/'},
attemptsLeft: {method: 'get', url: 'api/v1/quest_stat/attempts_left/'},
currentGitQuestAttempt: {method: 'get', url: 'api/v1/quest_stat/current/'},
startGitNewAttemptQuest: {method: 'post', url: 'api/v1/quest_stat/new_attempt/'},
finishGitNewAttemptQuest: {method: 'put', url: 'api/v1/quest_stat/finish/'}
}
Конфигурация интерфейса

- В теле запроса.
- В параметрах запроса. В url ресурса.
- Как часть URL. Идентификаторы ресурсов.
где передаются параметры запроса.
Параметры запроса

внешний код абстрагирован от этой логики.
/**
*/
export async function getCurrentCourse({rootGetters, commit, dispatch}, courseId) {
try {
const data = rootGetters.api.getCourse({params: {courseId}})
} catch (err) {
dispatch('common/errorMessage', 'errors.fetchCoursesError', {root: true})
throw Error(err)
}
}
Внешний код абстрагирован

/**
* Добавление нового курса.
*/
export async function createNewCourse({rootGetters, commit, dispatch}, courseData) {
try {
const data = rootGetters.api.addCourse({data: courseData})
} catch (err) {
dispatch('common/errorMessage', 'errors.addCourseError', {root: true})
throw Error(err)
}
}
Внешний код абстрагирован

/**
* Прокси объект для динамического вызова функций апи.
*/
export default new Proxy(
new ApiClientClass(),
{
get: function (target, name) {
if (BACKEND_ENDPOINTS[name] !== undefined) {
return ({params = {}, data = {}, args = {}} = {}) => {
return target.client({
method: BACKEND_ENDPOINTS[name].method,
url: target.urlFormat(BACKEND_ENDPOINTS[name].url, args),
data: data,
params: params
})
.then((serverResponse) => {data: serverResponse.data})
.catch((error) => {
if (error.response.status === httpBadRequest)
new BadDataError('Bad request error')
throw new Error('Server response error')
})
}
} else {
// Если вызов не относиться к вызову стандартного API вызываем его напрямую из объекта
return target[name]
}
}
}
)
Универсальный метод

реализация универсального метода
/**
*/
{
data: data,
params: params
})
.catch((error) => {
})
}
} else {
// Если вызов не относиться к вызову стандартного API вызываем его напрямую из объекта
return target[name]
}
}
}
)
Универсальный метод

// Получение токенов при помощи авторизационных данных пользователя.
async loginByToken ({ urlArguments }) {
try {
const result = await this.client({
method: BACKEND_ENDPOINTS.updateToken.method,
url: this.urlFormat(BACKEND_ENDPOINTS.updateToken.url, urlArguments)
})
const { data } = result
this.setTokens({
tAccess: data.jwt_token.access,
tRefresh: data.jwt_token.refresh
})
return true
} catch (err) {
if (err.response.status === httpNotFound) {
// Пробуем определить является ли ответ бизнес ответом или это просто не валидный урл
if (err.response.data.result) {
console.warn('Token on server not found err.response = ', err.response)
return false
}
throw new Error(err)
}
throw new Error(err)
}
}
Специальные методы

async logout () {
try {
const result = await this.client({
...{
method: BACKEND_ENDPOINTS.updateToken.method,
url: `${BACKEND_ENDPOINTS.updateToken.url}${token}/`
}
})
} catch (error) {
if (error !== USER_UNAUTHORIZED) {
const respStatus = error.response.status
if (![httpForbidden, httpUnauthorized].includes(respStatus)) {
throw new Error(error.response)
}
}
} finally {
this.removeTokens()
}
}
Специальные методы

setTokens ({tAccess = '', tRefresh = ''}) {
localStorage.setItem('tAccess', tAccess)
localStorage.setItem('tRefresh', tRefresh)
window.dispatchEvent(new StorageEvent('storage', {key: 'tAccess'}))
window.dispatchEvent(new StorageEvent('storage', {key: 'tRefresh'}))
}
removeTokens() {
localStorage.removeItem('tAccess')
localStorage.removeItem('tRefresh')
window.dispatchEvent(new StorageEvent('storage', {key: 'tAccess'}))
window.dispatchEvent(new StorageEvent('storage', {key: 'tRefresh'}))
}
Хелперы

- Обработки ответов опирается на JSON-RPC коды
- Упрощенная логика формирования запроса
- Упрощенная логика обработки ошибок
- Возможность множественного вызова
JSON-RPC vs REST-like

JSON-RPC реализация
/**
* Реализация REST
*/
}
axios.create({
baseURL: process.env.API_URL ?
process.env.API_URL : '',
})
}
}
/**
* Реализация RPC интерфейса.
*/
}
const customRequestsUri = process.env.API_URL
+ process.env.API_URN
axios.create({
baseURL: customRequestsUri || 'rpc/',
})
}
}
JSON - rpc реализация

r => r,
async error => {
if (error.response && error.response.status ===
httpForbidden) {
this.removeTokens()
}
httpUnauthorized && !error.config.retry) {
try {
this.setTokens({
})
...error.config,
retry: true
}
} catch (err) {
console.warn('')
throw err
} finally {
}
}
throw error
}
)
async response => {
/**
* Перехватчик неавторизованных запросов при вызове
* одиночного метода Если при попытке доступа к ресурсу
* мы получили код 32001 это означает что нужно
* предпринять попытку повторного запроса токена
*/
const {data} = response
if (data.error
&& data.error.code === RPCUnauthorizedException
&& !response.config.retry
) {
try {
await this.createRefreshRequest()
...response.config,
retry: true
}
} catch (err) {
console.warn(
'Error when requesting refresh err', err
)
}
}
return response
},
error => error
)
Обработка по JSON - rpc кодам

r => r,
async error => {
httpForbidden) {
this.removeTokens()
}
httpUnauthorized && !error.config.retry) {
try {
this.setTokens({
})
...error.config,
retry: true
}
} catch (err) {
console.warn('')
throw err
} finally {
}
}
throw error
}
)
async response => {
/**
* Перехватчик неавторизованных запросов при вызове
* одиночного метода Если при попытке доступа к ресурсу
* мы получили код 32001 это означает что нужно
* предпринять попытку повторного запроса токена
*/
const {data} = response
if (data.error
&& data.error.code === RPCUnauthorizedException
&& !response.config.retry
) {
try {
await this.createRefreshRequest()
...response.config,
retry: true
}
} catch (err) {
console.warn(
'Error when requesting refresh err', err
)
}
}
return response
},
error => error
)
JSON - rpc реализация

async callFunction (payload) {
let response = null
try {
response = await this.client({
method: 'post',
data: payload
})
} catch (err) {
console.warn(err)
throw new Error('Not found end point or Server error')
}
const { data } = response
if (Array.isArray(data)) {
return data.map(
rawResultData => rawResultData.error
? { error: rawResultData.error.message, id: rawResultData.id }
: { result: rawResultData.result, id: rawResultData.id }
)
}
if (data.error) {
throw new Error(data.error.message)
}
return data.result
}
/**
*/
{
data: data,
params: params
})
.catch((error) => {
})
}
} else {
// Если вызов не относиться к вызову стандартного API
вызываем его напрямую из объекта
return target[name]
}
}
}
)
Обработка ошибок

const API_METHODS = {
getCourses: {transport: 'http', url: 'course.getCourses'},
getCourse: {transport: 'http', url: 'course.getCourses'},
addCourse: {transport: 'http', url: 'course.addCourse'},
modifyCourse: {transport: 'http', url: 'course.modifyCourse'},
refreshToken: {transport: 'http', methodName: REFRESH_TOKEN_METHOD_NAME},
verifyCodeByPhoneAndGetToken: {transport: 'http', methodName: VERIFY_SMS_CODE},
createToken: {transport: 'http', methodName: CREATE_TOKEN_METHOD_NAME},
logout: {transport: 'http', methodName: 'logout'},
registerPushNotification: {transport: 'http', methodName: REGISTER_PUSH_NOTIFICATION},
updateCustomerProfile: {transport: 'http', methodName: 'user.updateCustomerProfile'},
getCustomerProfile: {transport: 'http', methodName: 'user.getCustomerProfile'},
getTokenForDownloadFile: {transport: 'http', methodName: 'common.getTokenForDownloadFile'},
personalUserStatistic: {transport: 'http', methodName: 'statistic.personalUserStatistic'}
}
Конфигурация

/**
* Генератор маршрутизатора транспорта RPC методов бекенда
*/
Object.keys(API_METHODS)
.forEach(methodName => {
BACKEND_METHODS[methodName] = {
transport: API_METHODS[methodName].transport,
requestPayloadConfig: (params = []) => {
return {
...RPC_20_DATA_STRUCTURE(),
...{
params,
method: API_METHODS[methodName].methodName
}
}
}
}
})
/**
* Регистрация метода API
*/
registerMethod (methodName) {
this[`${methodName}Constructor`] =
BACKEND_METHODS[methodName]
this[methodName] = async (...params) => {
try {
const result = await this
.transports[this[`${methodName}Constructor`].transport]
.callFunction(
this[`${methodName}Constructor`].requestPayloadConfig(pa
rams)
)
return result
} catch (Err) {
throw new Error(`errors.${Err.message}`)
}
}
}
export const RPC_20_DATA_STRUCTURE = () => ({
jsonrpc: '2.0',
method: 'test_example_echo_method',
params: [],
id: uuidv4()
})
Формирование запроса

async callFunction (payload) {
let response = null
try {
response = await this.client({
method: 'post',
data: payload
})
} catch (err) {
console.warn(err)
throw new Error('Not found end point or Server error')
}
const { data } = response
if (Array.isArray(data)) {
return data.map(
rawResultData => rawResultData.error
? { error: rawResultData.error.message, id:
rawResultData.id }
: { result: rawResultData.result, id:
rawResultData.id }
)
}
if (data.error) {
throw new Error(data.error.message)
}
return data.result
}
/**
* Регистрация метода API
*/
registerMethod (methodName) {
this[`${methodName}Constructor`] =
BACKEND_METHODS[methodName]
this[methodName] = async (...params) => {
try {
const result = await this
.transports[this[`${methodName}Constructor`].transport]
.callFunction(
this[`${methodName}Constructor`].requestPayloadConfig(pa
rams)
)
return result
} catch (Err) {
throw new Error(`errors.${Err.message}`)
}
}
}
Формирование запроса

/**
*/
try {
const data = rootGetters.api.getCourse({args: {courseId}})
} catch (err) {
throw Error(err)
}
}
/**
*/
try {
} catch (err) {
throw Error(err)
}
}
Интерфейс не изменился

/**
* Отладка мульти-вызова.
* TODO Действие для отладки сервиса АПИ.
*/
export async function sendMulticallMethods ({ rootGetters }) {
try {
const result = await rootGetters.api.callMultiple([
{
methodName: 'testExampleProtectedEchoMethod',
params: [1, 2]
},
{
methodName: 'testExampleEchoMethod',
params: [2, 3]
},
{
methodName: 'testExampleProtectedEchoMethod',
params: [3, 4]
},
{
methodName: 'testExampleEchoMethod',
params: [4, 5]
},
])
return result
} catch (err) {
console.warn('sendMulticallMethods error err =', err)
}
}
Мультивызовы

JSON-RPC реализация на Proxy

формирование запроса с применением Proxy
export const apiClientFactory = (options = {}) => new Proxy(
new ApiClientClass(options),
{
return (...args) => {
const preparedData = {
...RPC_20_DATA_STRUCTURE({
inputParams: args,
method: name })
}
// Обращение к Апи.
data: preparedData
}).then(({ data }) => {
if (data.error) {
logger('data.error', data)
throw new Error(data.error)
}
return data.result
}).catch((error) => {
throw new Error(error)
})
}
}
}
)
Применение Proxy

export const apiClientFactory = (options = {}) => new Proxy(
new ApiClientClass(options),
{
return (...args) => {
const preparedData = {
...RPC_20_DATA_STRUCTURE({
inputParams: args,
method: name })
}
// Обращение к Апи.
data: preparedData
}).then(({ data }) => {
if (data.error) {
logger('data.error', data)
throw new Error(data.error)
}
return data.result
}).catch((error) => {
throw new Error(error)
})
}
}
}
)
Применение Proxy

/**
*/
try {
} catch (err) {
throw Error(err)
}
}
Интерфейс не изменился

Как это выглядит на сервере

как это выглядит на сервере
Как это выглядит на сервере

Копачёв Виталий
tg: @vetos_88
Спасибо за внимание

внутренняя логика. Выделение токенов

Организация работы с API на Vue.js, Виталий Копачёв

More Related Content

What's hot (19)

Similar to Организация работы с API на Vue.js, Виталий Копачёв (14)

More from Mail.ru Group (20)

Организация работы с API на Vue.js, Виталий Копачёв