我们知道，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. .Net Core Cookie跨站点共享 会话保持

    这里使用简单粗暴的方式,只为做个记录. 关键配置: services.AddDataProtection() .SetApplicationName("appname") .Dis ...

  2. JSon数据类型&使用基础

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Row_Number() over( PARTITION By cno ...)

    转自:https://blog.csdn.net/qq_25237107/article/details/644429691.在 MSSQL,oracle 有partition by 的用法creat ...

  4. Python基础笔记系列十一：标准输入输出、文件读写和指针等操作

    本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 标准输入输出一.输入 在sublime中这个时候需要安装SublimeRE ...

  5. url传递数据类型

    php中传递数据,get或post方式为啥用字符串传递,为什么不能直接用数组形式,用的话可以吗

  6. apollo各协议支持的客户端

    apollo 源自 activemq,以快速.可靠著称,支持多协议:STOMP, AMQP, MQTT, Openwire, SSL, and WebSockets,下面就STOMP, AMQP, M ...

  7. sql数据类型转换函数

    1.CAST()CAST (<expression> AS <data_ type>[ length ]) 2.CONVERT()CONVERT (<data_ type ...

  8. [javascript]jquery选择器笔记

    技术文档 中文:http://jquery.cuishifeng.cn/ 英文:http://api.jquery.com/category/selectors/ 分类 基本选择器 层次选择器 过滤选 ...

  9. 值得推荐的10本PHP书籍（转）

    值得推荐的10本PHP书籍(转) 一.总结 一句话总结: 二.值得推荐的10本PHP书籍 本篇文章的目的是想较全面地推荐10本PHP书籍,暂不讨论Linux/NGINX/Mysql等其他丛书. 前言 ...

  10. 转：MyEclipse安装Eclipse Memory Analyzer插件，并进行错误文件分析流程

    转自 http://www.cnblogs.com/nb44c/p/5218880.html 1.先安装MAT插件 Memory Analyzer 插件下载地址:http://www.eclipse. ...