как модулировать остальные вызовы API, используя Axios в Vuejs

Question

Я создаю приложение vuejs, в котором я использую axios, чтобы использовать мои остальные API. Я в основном вызываю axios.get в разных местах, каждый раз создавая новый экземпляр с необходимыми заголовками аутентификации.

// UserdataComponent.vue
const anInstance = axios.create({
  headers: {'X-API-TOKEN': store.state.token},
  auth: {
    username: SOME_USERNAME,
    password: SOME_PASSWORD
  }
})
anInstance.get(API_BASE_URL + '/userdata')

Это делается везде, где я делаю вызов API отдыха.

Итак, я хотел переместить это в отдельный файл, чтобы сохранить код СУХИМ.

Я переместил код создания экземпляра axios в отдельный файл и попытался экспортировать его как объект. Этот объект затем может быть импортирован туда, куда я хочу использовать остальные API. Я ожидал, что что-то подобное сработает ....

// http.js
import axios from 'axios'
import store from 'store/store.js'

const HTTP = axios.create({
  baseURL: API_BASE_URL,
  headers: { 'X-API-TOKEN': store.state.token },
  auth: {
    username: SOME_USERNAME,
    password: SOME_PASSWORD
  }
})

export default HTTP


// UserdataComponent.vue
import HTTP from 'http.js'
...
HTTP.get('/userdata')

Это дало мне всевозможные ошибки, когда axios.create возвращалось в виде строки вместо вызываемой функции.

Что я должен изменить здесь, чтобы заставить его работать так, как я хочу? Должен ли я даже использовать этот способ для модуляции механизма HTTP-запросов?

Answer 1

Не уверен, что это ответ на ваш вопрос, но это хороший способ его настроить.

Если вы создаете экземпляр axios в отдельном файле, вы можете вместо этого экспортировать определенные вызовы API, делая их доступными и для других компонентов.

// api.js
const HTTP = axios.create({
  baseURL: API_BASE_URL,
  headers: { 'X-API-TOKEN': store.state.token },
  auth: {
    username: SOME_USERNAME,
    password: SOME_PASSWORD
  }
})

export default {
  getSomeData () {
    return HTTP.get('/endpoint')
  },
  postSomeData (id, name) {
    return HTTP.post('/endpoint', {
      id: id,
      name: name
    })
  }
}

, а затем в свой компонент вы импортируете api.js и используете так:

//component.vue
import myApi from '../path/to/api'

export default {
  name: 'myComponent',
  methods: {
    someMethod () {
      myApi.getSomeData().then((response) => {
        ...code
      })
    }
  }
}

Answer 2

Я думаю, вы должны использовать Axios перехватчики для этого:

Axios.interceptors.request.use((config) => {
  // Add stuff to the config..
  // Add credentials to each request.
  config.withCredentials = true
  config.timeout = 10000
  config.headers['Accept-Language'] = i18n.locale
  config.headers['Content-Type'] = 'application/json'
  return config
})

Вы можете поместить этот код в свой основной файл.

Каждый раз, когда вы делаете запрос, вызывается этот код, и вы можете добавлять свои учетные данные в запрос, чтобы вам не приходилось передавать один и тот же код везде ...

Для получения дополнительной информации проверьте https://github.com/axios/axios#interceptors и в Интернете по этому вопросу.