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

Z时代
2024-01-10
分类：综合

vue

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>