iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 21
1
Modern Web

Vue.js 30天系列 第 21

Vue.js 21 - Ajax取得資料 - Axios篇

  • 分享至 

  • xImage
  •  

去年底 Vue 作者(Evan You)宣佈vue-resource不再是官方推薦,參考這篇文章

比起Angular、React,你會發現 Vue.js 的維護團隊小很多,若是一個套件有第三方資源替代,維護團隊就可以火力集中在其他戰場。

vue-resource可以繼續用,但猜想它的功能不太可能追加了。

這篇介紹功能更強的替代方案之一 - Axios

無痛轉移

不變的先講,同樣透過npmbower安裝

$ npm install axios --save

或透過CDN引用

已經用vue-resource寫了不少功能,想維持原本寫法?
沒問題!

其API與vue-resource對應

  • get(url[, config])
  • post(url[, data[, config]])
  • put(url[, data[, config]])
  • patch(url[, data[, config]])
  • delete(url[, config])
  • axios#head(url[, config])
  • axios#request(config)

同樣支援 promise

/* 送出GET */
axios.get('/someUrl')
  .then(function (response) {
    /* 成功拿到資料,然後... */
  })
  .catch(function (error) {
    /* 失敗,發生錯誤,然後...*/
  });

axios指給$http屬性後,搭啦!

/* 不用像前一篇載入Vue plugin */
Vue.prototype.$http = axios
{  
  this.$http.get('/someUrl')
      .then((response) => {
        /* 成功拿到資料,然後... */
      .catch((response) => {
        /* 失敗,發生錯誤,然後...*/
      })
      .finally(() => {
        /* 不論成功失敗,都做些事 */
      });
}

上一篇
Vue.js 20 - Ajax取得資料 - vue-resource
下一篇
Vue.js 22 - 除錯工具 - vue-devtools
系列文
Vue.js 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言