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 ...
随机推荐
- 用手机应用追踪城市噪声污染——微软Azure助力解决城市问题
噪声无孔不入的城市地带(图片来自于网络) 2014年4月19日发行的<经济学人>杂志预言,到2030年,中国人口的70%(约10亿人)会在城市中居住.中国城镇化的高速发展一方面大大提高了 ...
- 《自动化平台测试开发-Python测试开发实战》第2次印刷
书籍货源比较紧张.紧张啊,如此短的时间,已经第2次印刷.第2次印刷. 第2次印刷. 同时该书已确认与台湾出版社合作翻译成繁体版,甚至有可能与国外出版社合作翻译成英文版. 2018年7月 第1次印刷 2 ...
- 多个计数器在Vuex中的状态
安装 安装vue-cli npm i -g vue-cli 生成目录 vue init webpack 启动开发环境 npm run dev 启动命令 npm install -g vue-cli v ...
- 开始使用Github
Gather ye rosebuds while ye may 我自己也是刚开始使用github没几天,写得不好我就写自己常用的吧 2015年9月20日下午3:19更新知乎上这个答案写得好多了
- 从Instagram“宁静、规则”的成功 看国内APP发展之路
看国内APP发展之路" title="从Instagram"宁静.规则"的成功 看国内APP发展之路"> Instagram在全球获得的巨大成功 ...
- 2020年,MyBatis常见面试题总结
Mybatis 技术内幕系列博客,从原理和源码角度,介绍了其内部实现细节,无论是写的好与不好,我确实是用心写了,由于并不是介绍如何使用 Mybatis 的文章,所以,一些参数使用细节略掉了,我们的目标 ...
- 逆向破解之160个CrackMe —— 001(上)
CrackMe--001 前置知识介绍: 160 CrackMe 是比较适合新手学习逆向破解的CrackMe的一个集合,一共160个待逆向破解的程序 CrackMe:一些公开给别人尝试破解的小程序,制 ...
- SpringBoot图文教程10—模板导出|百万数据Excel导出|图片导出「easypoi」
有天上飞的概念,就要有落地的实现 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例都敲一遍 先赞后看,养成习惯 SpringBoot 图文教程系列文章目录 SpringBoot图文教程1「概念+ ...
- JZOJ 5258. 友好数对 (Standard IO)
5258. 友好数对 (Standard IO) Time Limits: 1000 ms Memory Limits: 524288 KB Detailed Limits Description I ...
- 快速排序python实现总结
背景:数据结构与算法是IT相关的工程师一直以来的基础考察重点,很多经典书籍都是用c++或者java来实现,出于对python编码效率的喜爱,于是取search了一下python的快排实现,发现大家写的 ...