Здесь, чтобы поделиться своим опытом использования перехватчиков Axios и надеяться, что это может быть полезно.
Чтобы использовать экземпляр Axios, вам необходимо создать файл api.js в своем каталоге.
import axios from ‘axios’ export default axios.create({ baseURL: `your API end point`, headers: { ‘Accept’: ‘application/json’, ‘Content-Type’: ‘application/json’ } })
api.js будет вашим экземпляром Axios, который вы будете использовать позже, вы можете использовать их где угодно, если вы импортируете их туда. Затем вы можете просто использовать api.post (‘/…’). Then (…)
А теперь перейдем к перехватчикам Axios.
Для Vue вы можете добавить перехватчик практически где угодно, я собираюсь добавить его в файл main.js.
Vue.prototype.$http = api;
Вам нужно будет импортировать api.js в файл main.js, и эта одна строка кода выше является ключом к глобальному использованию экземпляра Axios для Vue.
Итак, перехватчики будут делать всевозможные реакции, которые вы можете определить, когда приложение делает запрос или получает ответ и ошибки.
Вот файл main.js
import api from "./services/api"; Vue.config.productionTip = false; Vue.prototype.$http = api; api.defaults.timeout = 10000; api.interceptors.request.use( config => { const token = localStorage.getItem("access_token"); if (token) { config.headers.common["Authorization"] = token; } return config; }, error => { return Promise.reject(error); } ); api.interceptors.response.use( response => { if (response.status === 200 || response.status === 201) { return Promise.resolve(response); } else { return Promise.reject(response); } }, error => { if (error.response.status) { switch (error.response.status) { case 400: //do something break; case 401: alert("session expired"); break; case 403: router.replace({ path: "/login", query: { redirect: router.currentRoute.fullPath } }); break; case 404: alert('page not exist'); break; case 502: setTimeout(() => { router.replace({ path: "/login", query: { redirect: router.currentRoute.fullPath } }); }, 1000); } return Promise.reject(error.response); } } );
В вашем запросе Axios для входа вы фактически храните токен, который возвращается из бэкэнда, в localStorage или cookie, этот перехватчик будет использовать этот запрос, чтобы установить заголовок для авторизации.
Это в основном способ использования перехватчиков Axios во всем мире. Конечно, этот код не идеален, ему есть что улучшить. Желая, чтобы это могло вам немного помочь.