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);
                    }
                )
相关推荐
集成显卡3 小时前
Bun v1.3.6 发布:内置 Tarball 归档支持、JSONC 解析、Bundle 分析增强等重磅更新!
javascript·新版本·bun.js
奔跑的web.3 小时前
TypeScript Enum 类型入门:从基础到实战
前端·javascript·typescript
盐真卿3 小时前
python2
java·前端·javascript
梦梦代码精4 小时前
BuildingAI vs Dify vs 扣子:三大开源智能体平台架构风格对比
开发语言·前端·数据库·后端·架构·开源·推荐算法
刘一说4 小时前
Vue3 组合式 API(Composition API):逻辑复用的革命性实践
vue.js·vue
seabirdssss4 小时前
《bootstrap is not defined 导致“获取配置详情失败”?一次前端踩坑实录》
前端·bootstrap·html
kgduu5 小时前
js之表单
开发语言·前端·javascript
摘星编程6 小时前
React Native for OpenHarmony 实战:Picker 选择器组件详解
javascript·react native·react.js
摘星编程6 小时前
React Native for OpenHarmony 实战:VirtualizedList 虚拟化列表
javascript·react native·react.js
谢尔登7 小时前
Vue3 响应式系统——computed 和 watch
前端·架构