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 ...
随机推荐
- 将js进行到底:node学习4
使用Node做web开发 HTTP与TCP 上一回使用node.js的NET(TCP)模块开发了一个聊天室demo.单纯用到了原始的TCP协议,可以说TCP是HTTP,SMTP,FTP的鼻祖了,后面的 ...
- Java Annotation/Scope
1.在计算机编程语言Java中,什么是注释(Annotation)? 注释是一种可以添加到Java源代码的语法元数据或描述(注释不影响程序执行) 2.注释(Annotation)有什么作用? ( ...
- 一、HTTP和HTTPS的基本概念
1HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少. 2HT ...
- 张益肇:AI 医疗,微软有哪些布局?
编者按:近几年来,医疗和人工智能碰撞出了相当多的火花,大量资金短期投入到医疗领域当中.然而在微软亚洲研究院副院长张益肇博士看来,人工智能医疗是一场持久战,大家一定要沉下心多调研.多思考.多学习. 人工 ...
- C++走向远洋——33(静态成员的应用)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:time.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- Hadoop环境搭建问题总结
最近抽空搭建了Hadoop完全分布式环境,期间遇到了很多问题,大部分问题还是可以在网上搜到的,这里说下自己遇到的两个没有找到结果的问题吧. 1.启动时报:没有那个文件或目录 原因:三台机器的用户名不一 ...
- iOS Swift 开发语言之初接触,纯代码创建UIView,UITableView,UICollectionView
1. 初始化Label设置AttributeString override func viewDidLoad() { let label = UILabel(frame:CGRect(x:,y:,wi ...
- Javascript元编程之Annotation
语言的自由度 自由度这个概念在不同领域有不同的定义,我们借鉴数学中构成一个空间的维数来表达其自由度的做法,在此指的是:解决同一个问题彼此不相关的设计方法学数量. 例如,解决一个比如商品打折的问题,如何 ...
- PySide2的This application failed to start because no Qt platform plugin could be initialized解决方式
解决PySide2的This application failed to start because no Qt platform plugin could be initialized问题 今天在装 ...
- mongoose .find().limit()返回undefined
当我们使用mongoose的find方法查询数据库的同时,可以使用limit方法来指定返回数据的条数. limit方法基本语法如下所示: >db.COLLECTION_NAME.find().l ...