一.介紹
vue有兩個(gè)ajax庫(kù)阁危，vue-resource（vue 1.x）和axios（vue 2.x），官方推薦使用axios
二.安裝
vue-resource：npm install vue-resource --save
axios：npm install axios --save
三.使用
vue-resource請(qǐng)求數(shù)據(jù)
安裝完成后在main.js中引入并聲明使用遥皂，內(nèi)部會(huì)給vm對(duì)象和組件對(duì)象添加一個(gè)屬性$http
import VueResource from 'vue-resource'
//聲明使用插件
Vue.use(VueResource)//內(nèi)部會(huì)給vm對(duì)象和組件對(duì)象添加一個(gè)屬性$http
我們做一個(gè)請(qǐng)求搜索熱度最高的關(guān)鍵字例子瞬测，并獲取它的name和url
<div>
<div v-if="!repoUrl">loading</div>
<div v-else>most star repo is <a :href="repoUrl">{{repoName}}</a></div>
</div>
data () {
return {
repoUrl: '',
repoName: ''
}
}
先定義一個(gè)url用于搜索關(guān)鍵字，發(fā)送get請(qǐng)求雏逾，成功則獲取repoName 踱卵，repoUrl
mounted () {
//發(fā)ajax請(qǐng)求獲取數(shù)據(jù)
const url = 'https://api.github.com/search/repositories?q=v&sort=stars'
this.$http.get(url).then(
response => {
//成功了
const result = response.data
//得到最受歡迎的repo
const mostRepo = result.items[0]
this.repoUrl = mostRepo.html_url
this.repoName = mostRepo.name
},
response => {
alert('失敗了')
}
)
}
axios請(qǐng)求數(shù)據(jù)
在哪用就在哪里引入,寫法更簡(jiǎn)潔
import axios from 'axios'
axios.get(url).then(response => {
//成功了
const result = response.data
//得到最受歡迎的repo
const mostRepo = result.items[0]
this.repoUrl = mostRepo.html_url
this.repoName = mostRepo.name
}).catch(error => {
alert('請(qǐng)求失敗')
})
請(qǐng)求前
請(qǐng)求后
