<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

npm install axios --save

yarn add axios --save

import Vue from 'vue'
import App from './App.vue'
import * as $http from './api/utils/http-util.js'

Vue.config.productionTip = false

Vue.prototype.$http = $http

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

export default {
  baseUrl: {
    // Разработка
    dev: 'xxx',
    // Производство
    prod: 'xxx'
  }
}

import axios from 'axios' // Импорт axios
import config from '@/api/utils/config-util.js' // Импорт конфигурационного файла

const instance = axios.create({
  baseURL: config.baseUrl.dev,
  timeout: 60000
})

// Интерцептор запроса
instance.interceptors.request.use(function (config) {
  console.log('Запрос перед отправкой', config)
  return config
}, function (error) {
  console.log('Ошибка запроса', error)
  return Promise.reject(error)
})

// Интерцептор ответа
instance.interceptors.response.use(function (response) {
  console.log('Полученный ответ', response)
  return response
}, function (error) {
  console.log('Ошибка ответа', error)
  return Promise.reject(error)
})

// GET-запрос
export function get (url, data = {}) {
  return new Promise((resolve, reject) => {
    instance
      .get(url, {
        params: data
      })
      .then((response) => {
        resolve(response)
      })
      .catch((err) => {
        reject(err)
      })
  })
}

// POST-запрос
export function post (url, data = {}) {
  return new Promise((resolve, reject) => {
    instance.post(url, data).then(
      (response) => {
        resolve(response.data)
      },
      (err) => {
        reject(err)
      }
    )
  })
}
```### Обертка возврата данных return-util.js

> Можно расширять

```javascript
// Утилита
// Возврат результата запроса
export const returnMsg = async promise => {
  try {
    const res = await promise
    if (res.status === 200) {
      return res.data
    } else {
      return 'no 200 !'
    }
  } catch (e) {
    console.log(e.name + '====' + e.message)
    if (e.message.indexOf('404') !== -1) {
      return '404'
    }
    return 'error'
  }
}

import { get, post } from '@/api/utils/http-util.js'
import { returnMsg } from '@/api/utils/return-util.js'

export const getHomeData = async data => await returnMsg(get('hello', data))

export const getHomeData02 = data => post('hello', data)

<template>
  <div>
    Главная страница
    <h1>{{ str }}</h Yöntem>
  </div>
</template>

<script>

import { getHomeData } from '@/api/test-api.js'
import { ref, onMounted } from 'vue'

export default {
  setup () {
    const str = ref('значение по умолчанию')
    onMounted(async () => {
      const data = await getHomeData(null)
      str.value = data
    })
    return { str }
  }
}
</script>

<style>

</style>