使用npm安装axios

npm install axios --save

在main.js中引入axios

import axios from "axios";

注册axios到vue,注册axios到vue不能使用use方法(Vue.use(axios))

Vue.prototype.$http = axios;//$http为自定义的,Vue.prototype 为注册全局方法 其他任何组件都可以使用

之后就可以到页面使用

执行GET请求

<script type="text/ecmascript-6">
export default {
methods: function () {
this.$http.get('/user', {"id": 123})
    .then(res => {
console.log(res.data);
})
    .catch(err => {
     console.log(err.msg)
    })
}
};
</script>

执行POST请求

<script type="text/ecmascript-6">
export default {
methods: function () {
this.$http.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
   .then(res => {
console.log(res.data);
})
   .catch(err => {
console.log(err.msg);
})
}
};
</script>

一次并发多个请求

function getUserAccount(){
return axios.get('/user');
}
function getUserPermissions(){
return axios.get('/user/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
}))

vue.js请求数据(axios)的更多相关文章

  1. vue.js 请求数据

    VUE.JS var vm = new Vue({ el:"#list", data:{ gridData: "", }, mounted: function( ...

  2. vue vue-resource 请求数据

    main.js import Vue from 'vue'; import App from './App.vue'; /*使用vue-resource请求数据的步骤 1.需要安装vue-resour ...

  3. vue的请求数据方式

    一,vue-resource请求数据 介绍:vue-resource请求数据方式是官方提供的一个插件 步骤: 1,npm安装     npm  install vue-resource  --save ...

  4. VUE实现请求数据

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

  5. vue.js之数据传递和数据分发slot

    一.组件间的数据传递 1.父组件获取子组件的数据 *子组件把自己的数据,发送到父级 *vm.$emit(事件名,数据); *v-on: @ 示例用法:当点击send按钮的时候,"111&qu ...

  6. Vue.js实现数据的双向数据流

    众所周知,Vue.js一直使用的是单向数据流的,和angularJs的双向数据流相比,单向数据流更加容易控制.Vue.js允许父组件通过props属性传递数据到子组件.但是有些情况下我们需要在子组件里 ...

  7. vue.js + ajax 数据加载(纯新手get)

    似懂非懂的感觉下撸了一个小demo .(只是单纯的引用vue.js的小demo.)在实践中进步吧! 首先肯定要先看vue的文档,并且知道超超基础的小知识!!!奉上代码: HTML 部分: js的引用: ...

  8. js请求数据的例子

    //es6实现方式 const getData = async ()=> { //同步请求数据 const res1=await this.$http.get("https://www ...

  9. vue-axios当只调用vue.js又需要axios请求多时

    可以将axios方法封装一个函数 (function () { ASK = { get:function (url,data,succFun,errFun) { axios.get(url,{ par ...

随机推荐

  1. Guava Cache本地缓存

    Guava介绍 Guava是一种基于开源的Java库,其中包含谷歌正在由他们很多项目使用的很多核心库. 这个库是为了方便编码,并减少编码错误. 这个库提供用于集合,缓存,支持原语,并发性,常见注解,字 ...

  2. Java线程池拒绝策略

    Java线程池拒绝策略 相关资料: 线程池的RejectedExecutionHandler(拒绝策略):http://blog.csdn.net/jgteng/article/details/544 ...

  3. Blender 工具使用——显示键盘和鼠标操作

    Blender 工具使用--显示键盘和鼠标操作 Blender自己本身就带有显示按键和鼠标的功能,就是3D View: Screencast Keys插件. 打开 File(文件) -> Use ...

  4. g2o20160424 CMakeLists.txt

    LIB_PREFIX: 设置生成库的前缀 SET(LIB_PREFIX g2o_) # The library prefix SET(LIB_PREFIX g2o_) 变量的默认配置 # defaul ...

  5. Mat 与 IplImage 和 CvMat 的转换

    在 OpenCV 2 中虽然引入了方便的 Mat 类,出于兼容性的考虑,OpenCV 依然是支持 C 语言接口的 IplImage 和 CvMat 结构.如果你要与以前的代码兼容,将会涉及 Mat 与 ...

  6. 【Arcgis for android】spatialite打开shapefile

    互联网(free and share) 本文参考下面的博文: http://blog.csdn.net/arcgis_all/article/details/8232976 Preparation: ...

  7. [raspberry pi3] hadoop 编译搭建和配置

    Causion: 只有一个raspberry pi3的就随便玩玩吧,瓶颈不在在cpu, 1 G的内存实在是太少了,跑个hadoop就很辛苦了 下面是瞎折腾的过程: oracle的arm jdk的安装过 ...

  8. 重建freescale 4.6.2 multilib toolchain

    patch和crosstool-ng 可以从下面的网址下载, https://community.freescale.com/thread/386450 不过估计你会失望的,改了脚本,编译了后发现不对 ...

  9. SharpCompress压缩和解压缩,并解决压缩的中文乱码问题

    一.下载SharpCompress库 二.解压缩 (1)不带密码 /// <summary> /// 解压缩(支持rar,zip) /// </summary> /// < ...

  10. jQuery之$.support.xxx

    下面这段代码来自jQuery-file-upload 9.19官方Demo $(function () { 'use strict'; // Change this to the location o ...