vue 專案中常用的 2 個 ajax 庫

1、 vue-resource
vue 外掛, 非官方庫, vue1.x 使用廣泛

2、 axios
通用的 ajax 請求庫, 官方推薦, vue2.x 使用廣泛

vue-resource 的使用

1、線上文件
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

2、下載

npm install vue-resource --save

3、 編碼
引入模組

import VueResource from 'vue-resource'

使用外掛

Vue.use(VueResource)

通過 vue/元件物件傳送 ajax 請求

this.$http.get('/someUrl').then((response) => {
    // success callback 
    console.log(response.data) //返回結果資料
}, (response) => {
    // error callback
    console.log(response.statusText) //錯誤資訊
})

axios 的使用

1、 線上文件
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

2、 下載:

npm install axios --save

3、 編碼
引入模組

import axios from 'axios'

傳送 ajax 請求

axios.get(url)
    .then(response => {
        console.log(response.data) // 得到返回結果資料
    })
    .catch(error => { 
        console.log(error.message)
    })

4、 測試介面
介面 1:

https://api.github.com/search/repositories?q=v&sort=stars

介面 2:

https://api.github.com/search/users?q=aa