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);
                    }
                )
相关推荐
摇滚侠1 分钟前
Vue 项目实战《尚医通》,完成订单详情静态的搭建,笔记47
vue.js·笔记
拉不动的猪19 分钟前
文件下载:后端配置、前端方式与进度监控
前端·javascript·浏览器
Amy_yang25 分钟前
前端实现 Server-Sent Events 全解析:从代码到调试的实战指南
前端·uni-app
sean聊前端25 分钟前
听说vite要一统江湖了,我看看怎么个事
前端
喝二两啤酒28 分钟前
手把手打通 H5 多支付通道(Apple pay、Google pay、第三方卡支付)
前端
特级业务专家1 小时前
续集:Vite 字体插件重构之路 —— 从“能用”到“生产级稳定”
javascript·vue.js·vite
gongzemin1 小时前
约课小程序增加候补功能
前端·微信小程序·小程序·云开发
西西西西胡萝卜鸡1 小时前
徽标(Badge)的实现与优化铁壁猿版(简易版)
前端
Never_Satisfied1 小时前
在JavaScript / 微信小程序中,动态修改页面元素的方法
开发语言·javascript·微信小程序
王大宇_1 小时前
虚拟列表从入门到出门
前端·javascript