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);
                    }
                )
相关推荐
m0_738120723 分钟前
渗透基础知识ctfshow——Web应用安全与防护(第六 七章)
服务器·前端·安全
Sun子矜3 分钟前
Web项目18+项目21
前端
踩着两条虫14 分钟前
VTJ:项目模型架构
前端·低代码·ai编程
踩着两条虫25 分钟前
VTJ:DSL语言规范
前端·低代码·ai编程
广州华水科技29 分钟前
单北斗GNSS在水库形变监测中的应用与优势分析
前端
洲星河ZXH41 分钟前
JavaWeb,前端工程化
前端
子兮曰43 分钟前
独立开发者主流技术栈(2026最新)
前端·后端·全栈
踩着两条虫1 小时前
VTJ.PRO 新手入门:从环境搭建到 AI 生成首个 Vue3 应用
前端·javascript·数据库·vue.js·人工智能·低代码
十有八七1 小时前
Resume Agent P1 开发 — 记忆管理 + 用户配置 + 工具系统
前端·后端
他是龙5511 小时前
63:JS 加密断点调试与逆向实战
开发语言·javascript·状态模式