vue 代理, 转发请求

爱菜鸟高高飞

已于 2022-07-22 15:03:20 修改

阅读量776

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-07-22 14:59:26 首次发布

本文链接：https://blog.csdn.net/u010074478/article/details/125932577

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

这篇博客介绍了在Vue应用中，使用axios与vue-resource进行Ajax请求的实例。官方推荐使用axios，尽管vue-resource在Vue1.x时代广泛使用但现在已不再维护。示例代码展示了如何在main.js和组件中集成及使用这两个库进行GET请求，并处理请求的成功与失败情况。

摘要由CSDN通过智能技术生成

一.axios : 通用的 Ajax 请求库, 官方推荐，使用广泛

二.vue-resource : vue 插件库, vue1.x 使用广泛，官方已不维护

一.axios : 通用的 Ajax 请求库, 官方推荐，使用广泛

1, main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this
	},
})

2.App.vue

<script>
	import axios from 'axios'
	export default {
		name:'App',
		methods: {
			getStudents(){
				axios.get('http://localhost:8080/students').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			},
			getCars(){
				axios.get('http://localhost:8080/demo/cars').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
		},
	}
</script>

二.vue-resource : vue 插件库, vue1.x 使用广泛，官方已不维护

1. main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
   el:'#app',
   render: h => h(App),
   beforeCreate() {
      Vue.prototype.$bus = this
   },
})

2.Searh.vue

<script>
	export default {
		name:'Search',
		data() {
			return {
				keyWord:''
			}
		},
		methods: {
			searchUsers(){
				//请求前更新List的数据
				this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
				this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
					response => {
						console.log('请求成功了')
						//请求成功后更新List的数据
						this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
					},
					error => {
						//请求后更新List的数据
						this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
					}
				)
			}
		},
	}
</script>