Vue.jsでAjax処理

Ajax, HTML, JavaScript, Vue.js

今回は、Vue.jsにおけるAjax処理について書いてみたいと思います。
一旦、このような画面を考えてみます。

環境

  • Mac OS X El Capitan (ver. 10.11.3)
  • zsh 5.0.8 (x86_64-apple-darwin15.0)

  • package.json

ソースコード

  • HTML部分

ダウンロードボタンを押した際にdownload(‘music’)関数が呼ばれるとして、
その内部でダウンロード処理(downloadMusicFile関数)を書こうとすると以下のようになります。

因みに、axiosのライブラリを使用した書き方は、上記のようになります。
Node.jsのパッケージ管理ツールでaxiosをインストールしてから
import axios from ‘axios’ のようにimportしてあげる必要があります。
ただし、今の所、jQueryで書くのとどう違うの…?という部分までは調査できていません、、

補足

  • Ajax処理部分

注意点として、バックエンドでサーバーレスを使用している場合など
最初のサーバと違うドメインを指定してAjaxの処理を行おうとすると
JavaScriptの同一生成元ポリシーの言語仕様に引っかかる為、CORSを有効に
するなどのことが必要になります。

(この場合、S3に一回アクセスしてからAPIGatewayのエンドポイント指定してAPIの呼び出しを行う…など)

この記事を書いた人

岡崎拓哉
岡崎拓哉

2016年に入社した新卒。ドラムとインコが好きな人。
最近は、デザイン駆動設計や関数型プログラミングに興味あり。
マネジメントも覚えていきたい系エンジニア。

Ajax, HTML, JavaScript, Vue.js