我们知道，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. Servlet3.0整合Springmvc（注解版）

    在创建maven的web工程时候,如果报错缺少web.xml 则在pom添加如下配置 : <build> <plugins> <plugin> <groupI ...

  2. LeetCode——maximal-rectangle

    Question Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ...

  3. LeetCode——Find Duplicate Subtrees

    Question Given a binary tree, return all duplicate subtrees. For each kind of duplicate subtrees, yo ...

  4. LeetCode——Single Element in a Sorted Array

    Question Given a sorted array consisting of only integers where every element appears twice except f ...

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

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

  6. JS 如何获取当前上一个月、下一个月和月份所含天数

    在数据报表查询中,经常需要设置查询的日期区间,如查询2018-02-01至2018-02-28的整月数据,这时需要提供快捷整月查询按钮: 如: 一般日期年月日之间由"-"或者&qu ...

  7. POJ 1144 Network（无向图的割顶和桥模板题）

    http://poj.org/problem?id=1144 题意: 给出图,求割点数. 思路: 关于无向图的割顶和桥,这篇博客写的挺不错,有不懂的可以去看一下http://blog.csdn.net ...

  8. 在HTTP通讯过程中，是客户端还是服务端主动断开连接？

    比如说:IE访问IIS,获取文件,肯定是要建立一个连接,这个连接在完成通讯后,是客户端Close了连接,还是服务端Close了连接.我用程序测模拟IE和IIS,都没有收到断开连接的消息,也就是都没有触 ...

  9. helloworld:一个完整的WCF案例

    服务端 1.创建一个空的解决方案:WCFDemo: 2.创建一个宿主控制台程序:Host 3.右击Host项目,选择“添加”--“新建项”,选择“WCF服务”创建名为“Service1.cs”的服务 ...

  10. 使用jsonp去访问跨域数据，回调使用数据

    var foo = function (data) { console.log("foo", data)} var testJsonP = function () { $.ajax ...