Question

我正在创建一个vuejs应用，其中我使用axios来消耗我的rest 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')

在我进行REST API调用的任何地方都可以做到这一点。

所以我想将其移到一个单独的文件中以保持代码DRY。

我将axios实例创建代码移至一个单独的文件，并尝试将其导出为对象。然后，只要我想使用rest 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并在网上找到有关此主题的信息。

如何在vue.js中使用axios模块化其余api调用

2 个答案: