我们知道,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. IDEA 逆向工程

    今天要写一个导入功能,需要把数据库的一个表映射成一个pojo,但是这表字段不是一般的多啊...想了想能不能自动生成???在IDEA中点了半天发现还是可以的 下面介绍一下步骤: 第一步:找到这个图标,建 ...

  2. javascript中关于&& 和 || 表达式的小技巧分享

    如果你还是新手, 而且读完所有这些技巧的详解和每种技巧是如果工作的以后运用它们, 你会写出更加简练高效的JavaScript程序. 确实, JavaScript高手已经运用这些技巧写出了很多强大, 高 ...

  3. [小问题笔记(八)] 常用SQL(读字段名,改字段名,打印影响行数,添加默认值,查找存储过程等)

    读取所有字段,自然排序 declare @fields varchar(max) Select @fields=ISNULL(@fields,'')++name+',' from syscolumns ...

  4. [小问题笔记(四)] Enum枚举类型转换为DataTable( C# )

    枚举: public enum ProductType { 小产品=, 大产品, 超大产品 } 转换方法: /// <summary> /// 枚举类型转化为DataTable /// & ...

  5. springboot项目属性配置及注意事项

    在idea编辑器建的springboot项目中的resources包下的application.properties这个就是配置文件. 另外配置文件的文件名还可以是application.yml,在r ...

  6. authentication vs authorization 验证与授权的区别

    认证和授权的区别 Authentication vs. Authorization简单来说,认证(Authentication )是用来回答以下问题: 用户是谁 当前用户是否真的是他所代表的角色 通常 ...

  7. [eclipse]Syntax error on tokens, delete these tokens问题解决

    错误:Syntax error on tokens, delete these tokens 出现这样的错误一般是括号.中英文字符.中英文标点.代码前面的空格,尤其是复制粘贴的代码,去掉即可. 如下图 ...

  8. ElasticSearch + Canal 开发千万级的实时搜索系统【转】

    公司是做社交相关产品的,社交类产品对搜索功能需求要求就比较高,需要根据用户城市.用户ID昵称等进行搜索. 项目原先的搜索接口采用SQL查询的方式实现,数据库表采用了按城市分表的方式.但随着业务的发展, ...

  9. Struts2异常处理配置

    <package name="lee" extends="struts-default"> <!--定义全局结构映射 --> <g ...

  10. percona innobackupex 遇到 connect to MySQL server as DBD::mysql module is not installed 问题

    percona innobackupex connect to MySQL server as DBD::mysql module is not installed [root@mysql softw ...