使用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. yii2常用excel操作库

    yii2使用较多的excel操作库 1."phpoffice/phpexcel" https://github.com/PHPOffice/PHPExcel/archive/1.8 ...

  2. C++面试笔记--排序

    这里我们开始复习排序的一些面试题. 首先我们来看一下各个排序方法的时间复杂度和稳定性的比较,见下面表格: 排序法 平均时间 最差情形 稳定度 额外空间 备注 冒泡 O(n2)     O(n2) 稳定 ...

  3. 《Effective Java》第2章 创建和销毁对象

    第2条:遇到多个构造器参数时要考虑用构建器 与构造器相比,builder的微略优势在于,builder可以有多个可变(varargs)参数.构造器就像方法一样,只能有一个可变参数.因为builder利 ...

  4. 关于webapi练习过程中遇到的一系列问题记录

    最近在尝试本地进行webapi调用的过程中,遇到一系列的问题,demo很小但着实让人头疼,先附上demo. 前台页面,目的是展示新闻的分类: 类别模型如下: 控制器代码如下: public Actio ...

  5. 「美团 CodeM 初赛 Round A」最长树链

    题目描述 Mr. Walker 最近在研究树,尤其是最长树链问题.现在树中的每个点都有一个值,他想在树中找出最长的链,使得这条链上对应点的值的最大公约数不等于1.请求出这条最长的树链的长度. 输入格式 ...

  6. duddo在xml里面出现红叉的解决方法

    原因是没有加入dubbo.xsd window-Preferences-输入xml-xmltacalog....... 配置离线约束:http://code.alibabatech.com/schem ...

  7. B - Factors of Factorial

    Problem Statement You are given an integer N. Find the number of the positive divisors of N!, modulo ...

  8. python web开发之flask框架学习(2) 加载模版

    上次学习了flask的helloword项目的创建,这次来学习flask项目的模版加载: 第一步:创建一个flask项目 第二步:在项目目录的templates文件夹下创建一个html文件 第三步: ...

  9. RouteSelector的初始化

    继前面的几篇OKhttp的拦截器简单分析之后,对于后续Okhttp之间的分析自己也着实琢磨了一段时间,是分析RealConnection?还是ConnectionPool,随着对Okhttp源码的深入 ...

  10. 树状数组 P3605 [USACO17JAN]Promotion Counting晋升者计数

    P3605 [USACO17JAN]Promotion Counting晋升者计数 题目描述 奶牛们又一次试图创建一家创业公司,还是没有从过去的经验中吸取教训--牛是可怕的管理者! 为了方便,把奶牛从 ...