Ajax 请求 | Quasar 框架

Quasar CLI with Webpack - @quasar/app-webpack

Ajax 请求

我们建议在项目初始化期间选择 Axios。

如果您在项目初始化期间没有选择 Axios，那么您应该创建一个新的引导文件 axios.js，它看起来像这样：（您也可以在这里为您的 axios 实例指定其他设置）

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

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

export default boot(({ app }) => {
  // for use inside Vue files (Options API) through this.$axios and this.$api

  app.config.globalProperties.$axios = axios
  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
  //       so you won't necessarily have to import axios in each vue file

  app.config.globalProperties.$api = api
  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
  //       so you can easily perform requests against your app's API
})

export { axios, api }

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

提示

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

在您的单文件组件方法中的使用方法如下所示。请注意，在下面的示例中，我们使用的是 Quasar 的通知插件（通过 $q = useQuasar() 和 $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 }
}

在 Vuex 操作中使用，以便在全局范围内向 axios 添加标头（例如，在身份验证期间）

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 文档以获取更多信息。

发现错误了吗？在浏览器中编辑此页面