覚え書き Vue.jsでjsonpを使ってみる

htmlコーダーがフロントエンドを学ぶ記録。
まだまだ初心者だから間違えながら覚えていくぞ！

#jsだとapi弾かれがち
vue.jsで簡単なwebアプリが作れるようになり、
apiを試してよくぶち当たったのが
"access-control-allow-origin" 周りのエラー。
jsonpってのを使わないと回避できないクロスドメインのエラーのよう。

でも、vueでjsonpを扱ってる記事って見つからない…。
jqueryはいっぱい出てくるのに！

#vueにもあったjsonp
これだ。
https://github.com/LancerComet/vue-jsonp

vue-cli と 単一ファイルコンポーネントでやってる環境前提で。
まずはインストールしましょう。

terminal

$ npm install --save-dev vue-jsonp

で、使いたいコンポーネントの中でインポートします

hoge.vue

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

使い方はざっくりこんな感じのよう。
Vueコンポーネント内だとthisになるのね。

Static function: Vue.jsonp(url, dataObj, timeout)
In Vue component: this.$jsonp(url, dataObj, timeout)

あとはこんな感じで

hoge.vue

data() {
  return {
    jsonData:''
  }
},
methods: {
  getData (apiUrl) {
    this.$jsonp(apiUrl, { keyword: 'キーワード' }).then(json => {
      // Success.
      this.jsonData = json
    }).catch(err => {
      // Failed.
    })
  }
}

ってな感じでaccess-control-allow-origin回避できそうです！
いろいろ試してみよ。