我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求
1.安装axios
cnpm i axios -S
2.方案一:修改原型链
首先,在main.js中引入
 
在这个时候,你还是无法在组件中使用axios的,但如果将vue改为vue的原型链,就可以解决这个问题,如下图
 
3.开始发送请求
 
 
5.带参数的请求
如果想要发送带json格式参数的请求,则需要使用qs模块来处理参数
首先在main.js中导入qs模块
 
然后使用qs处理参数
最终返回结果如下
 
 
6.回调函数的简写
 
7.注意
如果在vue中使用,那么vue中data中的数据无法通过this直接引用,需要做如下处理
 

axios如何使用的更多相关文章

  1. 为什么axios请求接口会发起两次请求

    之前在使用axios发现每次调用接口都会有两个请求,第一个请求时option请求,而且看不到请求参数,当时也没注意,只当做是做了一次预请求,判断接口是否通畅,但是最近发现并不是那么回事. 首先我们知道 ...

  2. axios基本用法

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...

  3. Axios、Lodash、TweenJS

    Axios是一个基于promise的HTTP库 http://chuansong.me/n/394228451820 Lodash是一个JavaScript的函数工具集 http://www.css8 ...

  4. axios全攻略

    随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文 ...

  5. 抛弃vue-resource拥抱axios

    vue-resource用法 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 是不是 ...

  6. Vue+axios 实现http拦截及路由拦截

    现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...

  7. vue使用Axios做ajax请求

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...

  8. vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)

    Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...

  9. 9.如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

    问题描述: 由于restful接口需要在头部header传递两个字段: Content-Type: application/jsonAccess-Token: 84c6635800b14e0eba4f ...

  10. vue2.0设置proxyTable使用axios进行跨域请求

    这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vue ...

随机推荐

  1. [BZOJ1722]Milk Team Select 产奶比赛

    Description Farmer John's N (1 <= N <= 500) cows are trying to select the milking team for the ...

  2. java开发中的诡异事件

    1.Excel中的诡异'\r' 2.springMVC中参数莫名的不匹配 今天在使用springmvc测试一个controller方法一直访问失败,400错误,百思不得其解 先是问同事,然后一起讨论了 ...

  3. 每天一点存储知识:集群Nas

    什么是集群Nas 集群是由多个节点构成的一种松散耦合的计算节点集合,协同起来对外提供服务.集群主要分为高性能集群HPC,高可用集群HAC和负载均衡集群LBC.集群Nas是指协同多个节点(通常称为Nas ...

  4. Asp.Net MVC 请求原理分析

    分析Asp.Net MVC的请求过程,我们从以下几方面看: 配置:IIS网站的配置可以分为两个块:全局 Web.Config 和本站 Web.Config . Asp.Net Routing属于全局性 ...

  5. Ubuntu16.04 安装openssl

    1 下载 https://www.openssl.org/source/ 2 解压 3 安装 # ./config --prefix=/usr/local --openssldir=/usr/loca ...

  6. 完美解决 No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android

    问题描述 好久之前的一个Android项目,最近需要重构一下 因为Android Studio的开发环境以及Gradle的版本等等都进行了一定的更新,于是导入Project以后,出现了报错: No t ...

  7. OpenID 和 OAuth 的区别及第三方登录的安全隐患分析

    转自:http://itindex.net/detail/48552-openid-oauth-%E6%96%B9%E7%99%BB 发表时间:2014-03-13 19:09 | 作者:天梯梦 出处 ...

  8. mysql 命令行参数说明

    mysql --help -h : 主机名 -u : 用户名 -p : 密码 -P : 端口,不写默认(3306) -D :指定数据库(一般不指定) -e :查询语句 --column-names : ...

  9. Stretch的Uniform和UniformToFill

    通俗理解Stretch的Uniform和UniformToFill: Uniform,控件的高度和宽度会增加直到达到了容器的大小,也就是说控件的大小和容器的大小是有关系的,同时如果给控件设置了明确的高 ...

  10. UVALive-5713 Qin Shi Huang's National Road System (次小生成树)

    题目大意:有n个城市,要修一些路使得任意两个城市都能连通.但是有人答应可以不计成本的帮你修一条路,为了使成本最低,你要慎重选择修哪一条路.假设其余的道路长度为B,那条别人帮忙修的道路两端城市中的总人口 ...