Vue中使用axios发送ajax请求
作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求:
首先是下载axios的依赖,
npm install --save axios vue-axios
然后在main.js中注册全局使用,
import Vue from 'vue'(基本项目建成就有,查看一下之前是否就有写,有的话可以省略)
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios) (注:这里划重点,不要管引入顺序,这里的use顺序一定不能变!important)
好了,接下来你就可以在你的项目中发送ajax请求了
Ex:
getStars() {
let url = 'https://api.github.com/search/repositories?q=v&sort=stars'
this.axios.get(url)
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
}
这里请求的书写方式有很多种。大家怎么舒服怎么写
Vue.axios.get()
this.axios.get()
this.$http.get()
或者
getStars(){
let url = 'https://api.github.com/search/repositories?q=v&sort=stars'
this.axios({
method: 'get',
url: url
}).then((res) => {
console.log(res)
})
谢谢~
Vue中使用axios发送ajax请求的更多相关文章
- vue中使用axios进行ajax请求数据(跨域配置)
npm安装axios npm install axios --save 引入axios import axios from 'axios' 使用axios mounted () { this.getH ...
- 在vue中使用axios发送post请求,参数方式
由于后台接收的参数格式为FormData格式, 在axios中参数格式默认为, 在传参数前,将原先官方提供的格式 改为如下: axios({ url: '../../../room/listRoomP ...
- vue中采用axios发送请求及拦截器
这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...
- Axios发送AJAX请求
目录 Axios 特征 axios提供主要三种发起请求的方式 方式一:直接axios实例直接call方式 方式二:通过axios实例提供的不同http请求方式的方法 方式三:其实是从第二种方式中单独提 ...
- Vue(七)发送Ajax请求
发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue ...
- js中使用队列发送ajax请求
最近,项目中需要按照先后顺序发送ajax请求,并且在一次请求结束后才能发起下一次,不然就会导致逻辑错误. 解决办法是定义一个数组,保存ajax请求数据. 以下使用extjs4定义一个类 Ext.def ...
- vue中使用axios发送请求
我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...
- 使用axios发送ajax请求
1.安装 npm install axios 2.在Home.vue中引入 import axios from 'axios' export default { name: 'Home', c ...
- Vue中使用echarts,ajax请求的远程数据赋值给图表不刷新的问题和解决办法
问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...
随机推荐
- Java ERROR JDWP Unable to get JNI 1.2 environment, jvm
Java: ERROR: JDWP Unable to get JNI 1.2 environment, jvm->GetEnv() return code = -2 DWP exit erro ...
- 算法设计与分析-Week12
题目描述 You are given coins of different denominations and a total amount of money amount. Write a func ...
- Laravel Study(使用 Laravel )
開始 伺服器及相關工具安裝自行建立,在伺服器跟目錄下 有兩種方式建立 Laravel 專案,這裡使用 composer 建立專案 使用 composer 要在 PHP 5.3.2 以上才能使用 com ...
- Random Forest And Extra Trees
随机森林 我们对使用决策树随机取样的集成学习有个形象的名字–随机森林. scikit-learn 中封装的随机森林,在决策树的节点划分上,在随机的特征子集上寻找最优划分特征. import numpy ...
- 安卓权威编程指南 挑战练习(第26章 在 Lollipop 设备上使用 JobService)
26.11 挑战练习:在 Lollipop 设备上使用 JobService 请创建另一个 PollService 实现版本.新的 PollService 应该继承 JobService 并使用 Jo ...
- MVC05
1. 添加搜索功能 如何实现url添加查询字符串实现查询指定项目的功能? 来到MovisController,修改Index方法如下 public ActionResult Index(string ...
- 原生js实现在表格用鼠标框选并有反选功能
今天应同学要求,需要写一个像Excel那样框选高亮,并且实现框选区域实现反选功能.要我用原生js写,由于没什么经验翻阅了很多资料,第一次写文章希望各位指出不足!! 上来先建表 <div clas ...
- JS动画之缓动函数分析及动画库
上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...
- 【jQuery学习日记】jQuery实现滚动动画
需要实现的效果 样式分析: 2个主要部分,头部的标题和导航部分,和主要的功能实现区域: 1.头部 <div id="header"> <h1>动漫视频< ...
- LeetCode 278.First Bad Version(E)(P)
题目: You are a product manager and currently leading a team to develop a new product. Unfortunately, ...