使用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. opencv新版本的数据结构

    转自 http://blog.csdn.net/yang_xian521/article/details/7108387 记得我在OpenCV学习笔记(四)——新版本的数据结构core里面讲过新版本的 ...

  2. loj2395 [JOISC 2017 Day 2]火车旅行

    传送门 分析 我们知道无论往左走还是往右走一定都是往不低于这个点的地方走 于是我们可以考虑用倍增来维护一个点向左和向右走$2^i$最远分别能走到哪里 我们可以先用单调栈求出直走一步的情况,之后再处理倍 ...

  3. poj2287 Tian Ji -- The Horse Racing

    传送门 分析 这个题和传统的田忌赛马不一样的地方就是多了平局情况,所有我们不难想到要用dp.我们先将两人的马均降序排列,用dpij表示考虑前i匹马,田忌有几匹马是按从大到小的顺序从头取的(剩下的是从尾 ...

  4. STM32 CAN控制器简介

    1.STM32自带了基本扩展CAN外设,又称bxCAN,bxCAN的特点如下: 2.模式:分为工作模式.测试模式.调试模式 睡眠模式主要用于降低功耗! 在静默模式下的工作原理 由图可知,它只会接受来自 ...

  5. 神奇的overflow:hidden及其背后的原理

    先来看两个overflow:hidden的使用例子 1.嵌套布局内部块元素设置float:left时,导致外部元素塌方,高度为0的问题. <div class="wrap"& ...

  6. centos中JDK版本冲突的问题

    在centos环境下,我JDK版本安装了jdk6,jdk7.系统还自带了一个JDK7. 我在查看JDK版本是,发现不是我在/etc/profile中配置的. 1:which java 查看Java的命 ...

  7. Website开发前页面设计 Mockup的一些工具

    这里介绍的Website开发前,页面设计的一些工具 1. Balsamiq    (我们公司用的) https://balsamiq.com/download/ 2. Figma https://ww ...

  8. C#知识点总结系列:3、C#中Delegate和Event以及它们的区别

    1.Monitor.Enter(object)方法是获取锁,Monitor.Exit(object)方法是释放锁,这就是Monitor最常用的两个方法,当然在使用过程中为了避免获取锁之后因为异常,致锁 ...

  9. Service Fabric 注意事项

    1. ActorTimer和ActorReminder会阻塞一个Actor的其他外部方法调用,即ActorTimer和ActorReminder内部就去未执行完毕之前,该Actor其他方法只能等待. ...

  10. Eavl整理

    一. 严格模式 eval方法只能在非严格模式中进行使用,在use strict中是不允许使用这个方法的. 二. 用法 eval函数会接收一个参数obj,如果obj不是一个字符串,那么eval会直接返回 ...