В этой статье я хочу поговорить об API -интерфейсах и о том, как управлять ими в нашем приложении. Прежде всего, мы должны выбрать модули таким образом, что мы выбрали наши модели. Позвольте мне объяснить: предположим, что у вас есть две модели данных, пользователь и книга. Каждая из моделей пользователей и книг имеет свой собственный API, например, регистрация пользователя или покупка книги. Таким образом, мы должны инкапсулировать каждый API для конкретной модели. Давайте начнем в нашем приложении Nuxt создать папку с именем API (или все, что вам удобно)
1. Создание клиентов HTTP с использованием экземпляров Axios 2. Структуризация ваших конечных точек API 3. Запросы сети в действиях Vuex 4. Handling сетевые ошибки
Axios предоставляет поддержку коробки для наличия постоянной конфигурации для всех наших вызовов API с использованием экземпляров Axios. Мы будем использовать экземпляры Axios в качестве клиентов HTTP в нашем приложении с нашими конфигурациями. Если вы работаете над крупномасштабным приложением, возможно, что вашему приложению необходимо общаться с различными конечными точками API. В этом случае нам может потребоваться создать несколько экземпляров Axios, с их собственной конфигурацией и разделить их на отдельные файлы.
Установите Axios в свой проект $ npm install -save axios
Всегда рассматривайте лучшие практики. Рекомендуется добавить URL -адреса API в .env -файл В файле .env в приложении Nuxt мы должны добавить Nuxt в переменные. Например: nuxt_env_base_url = https://api.myapp.test Прочитайте документы
Как только у нас появятся переменные окружающей среды, мы сможем получить их, создавая экземпляры Axios. Мы можем дополнительно передать всю нашу конфигурацию в этот экземпляр, включая заголовки, и использовать этот экземпляр для создания HTTP -запросов. Давайте создадим наш экземпляр клиента HTTP в httpclient.js, размещенном в папке API.
import axios from 'axios';
const httpClient = axios.create({
baseURL: process.env.baseUrl,
headers: {
"Content-Type": "application/json",
// anything you want to add to the headers
}
});
export default httpClient;
Структурирование ваших конечных точек API
Как я уже упоминал, нам нужна инкапсуляция. Таким образом, вы должны создать папку с именем пользователя в папке API и добавить в нее файл users.api.js. в users.api.js:
import httpClient from '../httpclient';
export const login = ({username, password}) => {
return httpClient({
url: '/login',
method: 'post',
headers: {
// "X-CSRF-TOKEN": getCookie('csrf_token')
},
data: {
username, password
}
});
}
export const register = ({username, password}) => {
return httpClient({
url: '/register',
method: 'post',
headers: {
// "X-CSRF-TOKEN": getCookie('csrf_token')
},
data: {
username, password
}
});
}
Мы можем следовать простой структуре каталогов для хранения всех этих файлов.
API/├acking httpclient.js -> http client с нашими конфигурациями ├íмобиль
И мы можем использовать их в наших компонентах Vue.js и Vuex Store, просто импортируя их.
import { login, register } from '@/api/users/users.api';
Создание сетевых запросов внутри Vueex Actions переносит весь бизнес -вход в Vuex Store, включая сетевые запросы, делает компоненты View независимым. Используйте действия, чтобы получить данные и хранить их в состоянии, используя мутации. (Не изменяйте состояния в действиях непосредственно) Действия по умолчанию синхронны, но вы можете использовать обещания или асинхрон, чтобы проверить, является ли действие завершено или нет. (Пожалуйста, попробуйте разделить модули в магазине Vuex, а также API).
Вот пример:
/*
* store/modules/users/users.module.js
*/
import {register, login} from "~/api/users/users.api";
export const state = () => ({
user: null,
csrf_token: null
})
export const getters = {
get_user(state) {
return state.user
},
}
export const mutations = {
SET_USER_INFO(state, user) {
state.user = user
},
}
export const actions = {
loginUser({store, commit}, {username, password}) {
return new Promise(async (resolve, reject) => {
try {
const response = await login({
username, password
});
//depends on the response
commit('SET_USER_INFO', response.data)
resolve()
} catch (err) {
reject(err.response.data.message)
console.log(err)
}
})
}
}
Обработка сетевых ошибок и регистрации
Это легко, как response.status в каждом запросе? Не идеально проверить статус и регистрировать эти ошибки в каждом сетевом запросе, который мы делаем в наших действиях. Вместо этого Axios предлагает способности перехватывать ответы на ошибку, что является идеальным местом для поиска ошибок, журнала или показать милое уведомление пользователю, в котором говорится, что сервер вытекает. Мы также можем использовать это для входа в систему пользователя из вашего приложения, если запросы не авторизованы или если сервер информирует об истечении сеанса.
import axios from 'axios';
const httpClient = axios.create({
headers: {
"Content-Type": "application/json",
}
})
// interceptor to catch errors
const errorInterceptor = error => {
// check if it's a server error
if (!error.response) {
return Promise.reject(error);
}
// all the other error responses
switch (error.response.status) {
case 401: // authentication error, logout the user
localStorage.removeItem('auth_token');
stop();
location.href = '/auth/login';
break;
default:
}
return Promise.reject(error);
}
// Interceptor for responses
const responseInterceptor = response => {
switch (response.status) {
case 200:
// yay!
break;
// any other cases
default:
// default case
}
return response;
}
httpClient.interceptors.response.use(responseInterceptor, errorInterceptor);
export default httpClient;
Это пример того, как вы можете управлять ошибками. (Есть несколько способов сделать это). Вот и все. Если вы следите за этой архитектурой для реализации вашего клиента API, вы можете масштабировать его очень просто, также ваши коды станут поддержанием И это очень важный момент, особенно для крупных проектов.
Спасибо, что прочитали эту статью 💖. Понравилась статья? Есть отзывы или предложения? Оставьте как и комментарий. Это поможет мне лучше понять и написать для вас более удивительные статьи 🙂.
Оригинал: “https://dev.to/ho3einmolavi/architecting-http-client-in-vue-js-nuxt-js-ig”