如果你是從 V1 就開始用 Vue 開發的朋友,一定知道 Vue.js 重要的核心特性就是只關注於 view layout 的呈現與 Components 系統,提供最小化且必要的功能給開發者。 其他的功能都可以自由選用第三方套件來完成,這也是為什麼被稱為「漸進式框架」的原因。

所以,如果我們用 Vue.js 來開發網站,且想使用 ajax 從遠端取得資源的時候,也許有些人會選用 jQuery ($.get / $.ajax ...等) ,也有些人會用 vue-resource 來做搭配。 早期官方推薦 vue-resource,到了 V2 官方的推薦 lib 改為 Axios 或是直接用原生 Fetch API

不過很可惜,除了包山包海的 jQuery 之外,其他目前都還不支援 jsonp 這樣的做法。 也就是說,如果你的專案上需要用到 jsonp ,而且又不希望掛上一大包的 jQuery,這裡有個簡單的套件可以幫助你。 (順便自己筆記)


首先先安裝 jsonp 這個套件。

Copy Code

$ npm install jsonp --save

Copy Code

$ yarn add jsonp

然後在你的程式碼內這樣使用:

Copy Code

import jsonp from 'jsonp'

jsonp('http://www.example.com/foo', { /* DATA HERE */ },
  function (err, data) {
    if (err) {
      console.error(err.message);
    } else {
      console.log(data);
    }
  });

就可以了。