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);
                    }
                )
相关推荐
星月前端12 小时前
[特殊字符]面向 ArcGIS for JavaScript(4.x)开发者的「坐标系统(CRS / 投影)」全面解读
开发语言·javascript·arcgis
星空的资源小屋12 小时前
永久删除文件利器:Permadelete
java·javascript·人工智能
柒昀12 小时前
Vue.js
前端·javascript·vue.js
2201_7578308713 小时前
Stream的终结方法
java·服务器·前端
进阶的鱼13 小时前
React+ts+vite脚手架搭建(五)【登录篇】
前端·javascript
safestar201213 小时前
React深度实战:从组件抽象到性能优化的思考历程
前端·javascript·react.js
洗澡水加冰13 小时前
VSCode插件: 自动临时分配Theme以区分不同窗口
前端·typescript·visual studio code
我叫张小白。13 小时前
TypeScript类型断言与类型守卫:处理类型的不确定性
前端·javascript·typescript
阿笑带你学前端13 小时前
Flutter 实战:为开源记账 App 实现优雅的暗黑模式(Design Token + 动态主题)
前端
天渺工作室13 小时前
Chrome浏览器自带翻译的诡异Bug:ID翻译后竟然变化了
前端·chrome