Общий обработчик ошибок для запросов во vue?

Question

[fessss]

Допустим есть какой-то компонент с кучей методов, которые обращаются к api
обработку ошибок делаю через try catch
Но получается много прям кода. Можно как-то иначе сделать? Более лаконично.

methods: {
async func1() {
  try {
    await axios.post(url);
    await axios.get(url);
  }
  catch (e) {
    console.log(e)
  }
},
async func2() {
  try {
    await axios.get(url);
  }
  catch (e) {
    console.log(e)
  }
},
async func3() {
  try {
    await axios.get(url);
  }
  catch (e) {
    console.log(e)
  }
},
}

Answer 1

[Игорь]

Используйте интерцептор.

Подкину свой пример.
Оформил в виде плагина для VUE.
Обратите внимание на эту строчку
export const $axios: AxiosInstance = _axios

Теперь все запросы идут через интерцептор, именно в нём буду ловить и обрабатывать ошибки протокола.

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import Vue from 'vue'

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

/* eslint-disable */
const config = {
  baseURL: process.env.VUE_APP_API,
  timeout: 30000,
  validateStatus (status: number) {
    return status < 500 // Resolve only if the status code is less than 500
  }
}
/* eslint-enable */

const _axios: AxiosInstance = axios.create(config)

/* eslint-disable */
// @ts-ignore
_axios.interceptors.request.use(async (config: AxiosRequestConfig): AxiosRequestConfig | Promise<AxiosRequestConfig> => {
  return Promise.resolve(config)
  },  (error) => {
    // Do something with request error
    return Promise.reject(error)
  }
)
/* eslint-disable */

// Add a response interceptor
_axios.interceptors.response.use((response): Promise<AxiosResponse> | any => {
  return response
  },  (error) => {
    // Do something with response error
    return Promise.reject(error)
  }
)

class AxiosPlugin {
  public install () {
    Object.defineProperties(Vue.prototype, {
      axios: {
        get () {
          return _axios
        }
      },
      $axios: {
        get () {
          return _axios
        }
      }
    })
  }
}

const axiosPlugin: AxiosPlugin = new AxiosPlugin()

Vue.use(axiosPlugin)

export default axiosPlugin
export const $axios: AxiosInstance = _axios