Vue（十）-- vue-ajax、ajax使用练习

目录

• 1.vue-resource（了解）
• 2.axios(重点)

1.vue-resource（了解）

• 下载
  npm install vue-resource --save

• 使用
  App.vue

<template>
	<div>
		<div v-if="!repoUrl">loading</div>
		<div v-else>most star repo is <a :href="repoUrl">{{repoName}}</a> </div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default{
		data(){
			return{
				repoUrl:'',
				repoName:''
			}
		},
		mounted(){
			//发ajax请求获取数据
			const url = 'https://api.github.com/search/repositories?q=vue&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(请求失败)
				}
			),
		}
	}
</script>

<style>
</style>

需要在main.js中引入并使用resource

/* 
 入口js：创建Vue实例
 */
import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'

//声明使用插件
Vue.use(VueResource)//内部会给vm对象和组件对象添加一个属性：$http

new Vue({
  el:'#app',
  components:{//将其映射成标签
    App
  },
  template:'<App/>'//使用组件标签
})

2.axios(重点)

• 下载
  npm install axios --save

• 使用
  和resource不同直接在需要使用axios的地方引入即可
  import axios from 'axios'
  App.vue

<template>
	<div>
		<div v-if="!repoUrl">loading</div>
		<div v-else>most star repo is <a :href="repoUrl">{{repoName}}</a> </div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default{
		data(){
			return{
				repoUrl:'',
				repoName:''
			}
		},
		mounted(){
			//发ajax请求获取数据
			const url = 'https://api.github.com/search/repositories?q=vue&sort=stars'
			//使用axios发送ajax请求
			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(请求失败)
			})
			
		}
	}
</script>

<style>
</style>