Vue2:请求接口的两种方式axios和vue-resource

一、场景描述

前端和后端的交互,肯定是要发生接口调用的

这个时候,就要涉及前端如何向后端接口发送请求,获取数据

二、请求方式

1、axios方式(推荐)

这个方式本质就是ajax,底层就是对xhr(XMLHttpRequest)的封装

javascript 复制代码
1、安装axios库
	npm i axios
2、在对应的vue组件里import库
	import axios from 'axios'
3、具体使用
                axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response => {
                        console.log('请求成功了',response.data);
                    },
                    error => {
                        console.log('请求失败了',error.message);
                    }
                )

2、vue-resource方式

底层就是对xhr的封装,它是一个插件

javascript 复制代码
1、安装vue-resource插件
	npm i vue-resource
2、mainjs文件中use插件
	//使用插件      这样,vm和vc身上都有了这个插件功能     多了一个$http
	Vue.use(vueResource);
3、具体使用
                this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response => {
                        console.log('请求成功了',response.data);
                    },
                    error => {
                        console.log('请求失败了',error.message);
                    }
                )
相关推荐
breakthrough_0119 分钟前
创建一个简单的 Nuxt.js 应用
开发语言·javascript·ecmascript
OEC小胖胖1 小时前
Vue 3 中 onUnload 和 onPageScroll 使用详解
前端·javascript·vue.js·前端框架·web
秋田君2 小时前
uniapp中使用Mescroll实现下拉刷新与上拉加载项目实战
javascript·uni-app
川石教育3 小时前
Vue前端开发-slot传参
前端·vue.js·前端框架·前端开发·slot组件
确实菜,真的爱3 小时前
vue3 element plus 把表格数据导出到excel
javascript·vue.js·excel
一舍予3 小时前
nuxt3项目搭建相关
开发语言·javascript·vue.js·nuxt
新时代的弩力3 小时前
【Cesium】--viewer,entity,dataSource
前端·javascript·vue.js
无恃而安3 小时前
localStorage缓存 接口 配置
javascript·vue.js·缓存
余道各努力,千里自同风3 小时前
HTML5 视频 Vedio 标签详解
前端·音视频·html5
_大菜鸟_4 小时前
修改element-ui-时间框date 将文字月份改为数字
javascript·vue.js·ui