Quasar在项目初始化过程中推荐使用Axios:
Use Axios for Ajax calls? (Y/n)
然后你应该创建一个如下所示的新启动文件axios.js
: (在这里您还可以指定您的axios实例的其他设置)
// src/boot/axios.js
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios
// ^ ^ ^ 这将允许你使用$.axios
// 所以你不需要在每个vue文件中导入axios
const api = axios.create({ baseURL: 'https://api.example.com' })
Vue.prototype.$api = api
// ^ ^ ^ 这将允许您使用this.$api
// 这样您就可以轻松地根据应用程序的api执行请求
export { axios, api }
还要确保用yarn/npm安装axios
软件包。
TIP
如果您使用的是Quasar CLI,请务必查看预取功能。
单文件组件方法中的用法如下所示。请注意,在下一个示例中,我们使用了Quasar的Notify插件(通过this.$q.Notify
)进行安装(按照前面的链接)。
import { api } from 'boot/axios'
methods: {
loadData () {
api.get('/api/backend')
.then((response) => {
this.data = response.data
})
.catch(() => {
this.$q.notify({
color: 'negative',
position: 'top',
message: 'Loading failed',
icon: 'report_problem'
})
})
},
}
向axios全局添加头文件的Vuex Actions中的用法(如身份验证期间):
import { api } from 'boot/axios'
export function register ({commit}, form) {
return api.post('/auth/register', form)
.then(response => {
api.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.token
commit('login', {token: response.data.token, user: response.data.user})
})
}
另请参阅Axios文档了解更多信息。