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 天前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛1 天前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
工藤学编程1 天前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保1 天前
上传文件,在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫1 天前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
博主花神1 天前
【React】扩展知识点
javascript·react.js·ecmascript
内存不泄露1 天前
基于Spring Boot和Vue 3的智能心理健康咨询平台设计与实现
vue.js·spring boot·后端
欧阳天风1 天前
用setTimeout代替setInterval
开发语言·前端·javascript
EndingCoder1 天前
箭头函数和 this 绑定
linux·前端·javascript·typescript
郑州光合科技余经理1 天前
架构解析:同城本地生活服务o2o平台海外版
大数据·开发语言·前端·人工智能·架构·php·生活