QuasarでAjaxリクエストを送信する方法

• 概要
• 環境
• インストール
• (任意)通知の有効化
• サンプルコード
• ちょっと解説

概要

axios を使って Quasar で外部のサイトにリクエストを送信する方法を紹介します

環境

• macOS 11.7
• node 18.9.0
• quasar 2.8.2
• axios 0.27.2

インストール

Quasarプロジェクト作成時にインストールしなかった場合は別途インストールします

• yarn add axios

(任意)通知の有効化

$q.notify を使うので設定ファイルを編集して通知を有効にします
quasar.config.js というファイルがありその中の framework という設定箇所があるのでそこの plugins と config を変更します

plugins には「Notify」を入力し config には「notify」を追加します

• vim quasar.config.js

return {
  framework: {
    plugins: [
      'Notify'
    ],
    config: {
      notify: { /* look at QuasarConfOptions from the API card */ }
    }
  }
}

※上記は一部抜粋

サンプルコード

• vim src/pages/IndexPage.vue

<template>
  <div>{{ data }}</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import axios from 'axios';
import { useQuasar } from 'quasar'

const data = ref('nodata')
const $q = useQuasar()

const api = axios.create({ baseURL: 'https://sample.allowed.cors.site' })

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

ちょっと解説

リクエストは axios を使って行います
今回は GET ですが POST なども行えます
今回のサンプルだとページを読み込んだ段階で毎回コールしてしまうのでボタンを押した場合やコンテンツが更新されたタイミングでコールするようにします

アクセスするサイトは当然ですが CORS 対応されたサイトにアクセスしてください
面倒であれば localhost に CORS 対応した適当のアプリを立ち上げても OK です

アクセスに成功すればその結果を data.value に設定します