Quasar CLI with Webpack - @quasar/app-webpack
Ajax请求

在项目初始化过程中我们推荐选择Axios。

如果在项目初始化过程中没有选择Axios,那么你应该创建一个如下所示的新启动文件axios.js: (在这里您还可以指定您的axios实例的其他设置)

// src/boot/axios.js

import { boot } from 'quasar/wrappers'
import axios from 'axios'

const api = axios.create({ baseURL: 'https://api.example.com' })

export default boot(({ app }) => {
  // 通过this.$axios和this.$API在Vue文件(Options API)内使用

  app.config.globalProperties.$axios = axios
  // ^ ^ ^ 这将允许你使用this.$axios(Vue Options API形式)
  //       所以你不需要在每个vue文件中导入axios

  app.config.globalProperties.$api = api
  // ^ ^ ^ 这将允许您使用this.$api(Vue Options API形式)
  //       这样您就可以轻松地根据应用程序的api执行请求
})

export { axios, api }

还要确保用yarn/npm安装axios软件包。

TIP

如果您使用的是Quasar CLI,请务必查看预取功能

单文件组件方法中的用法如下所示。请注意,在下一个示例中,我们使用了Quasar的Notify插件(通过this.$q.Notify)进行安装(按照前面的链接)。

import { ref } from 'vue'
import { api } from 'boot/axios'
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  const data = ref(null)

  function loadData () {
    api.get('/api/backend')
      .then((response) => {
        data.value = response.data
      })
      .catch(() => {
        $q.notify({
          color: 'negative',
          position: 'top',
          message: 'Loading failed',
          icon: 'report_problem'
        })
      })
  }

  return { data, loadData }
}

向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文档了解更多信息。