Vue 要实现异步加载需要使用到 vue-resource 库。(挂载到vue实例上)

(一)Vue-Resource引入

  • <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  • npm install vue-resource --save

(二)基础API

  • get(url, [options])
  • head(url, [options])
  • delete(url, [options])
  • jsonp(url, [options])
  • post(url, [body], [options])
  • put(url, [body], [options])
  • patch(url, [body], [options])

(三)参数

(四)使用

  • Get请求
  • Post请求
  • JSONP请求
  • Http请求
  • 全局拦截器使用
//methods外写全局地址,则请求中地址写文件名即可
http:{
root:"http://xxxxxx"
}

(五)Get请求

methods:{
get:function(){
this.$http.get("package.json",{
params:{
userId:"101"
},
headers:{
token:"abcd"
}
}).then(res=>{
this.msg=res.data;
},error=>{
this.msg=error;
});
}
}

(六)Post请求

methods:{
post:function(){
this.$http.post("package.json",{
userId:"102"
},{
headers:{
access_token:"abc"
}
}).then(function(res){
this.msg=res.data;
});
}
}

(七)JSONP请求

methods:{
jsonp:function(){
this.$http.jsonp("http://xxxxxx", {
this.msg=res.data;
});
}
}

(八)Http请求

methods:{
http:function(){
url:"package.json",
methods:'GET',
params:{
userId:"103"
},
headers:{
token:"123"
},
timeout:50,
before:function(){
console.log("before init")
}
}).then(function(res){
this.msg=res.data;
});
}

(九)全局拦截器使用

mount:function(){
Vue.http.interceptors.push(function(request,next){
console.log("request init.");
next(function(response){
console.log("response init.");
return response;
});
});
}

Vue:(四)Ajax(Vue-Resource)的更多相关文章

  1. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. vue实现ajax滚动下拉加载,同时具有loading效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. vue学习笔记(四)——Vue实例以及生命周期

    1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) |   |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...

  4. Vue中ajax返回的结果赋值

    这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...

  5. 四: 使用vue搭建网站前端页面

    ---恢复内容开始--- 在搭建路由项目的时候的基本步骤 一:创建项目 安装好vue 搭好环境 (步骤在上篇博客中) 进入项目目录      cd   目录路径/ 目录名 创建项目          ...

  6. vue实战(一):利用vue与ajax实现增删改查

    vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...

  7. vue的ajax

    vue的ajax常见的有两种 ,一种是 vue-resource,一种是axios vue-resource: 是vue的插件,非官方库, vue1.x 使用广泛 如何使用: 先在vue的脚本架上安装 ...

  8. Vue基础系列(四)——Vue中的指令(上)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  9. vue发送ajax请求

    一.vue-resource 1.简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护. 2.使用流程 step1:安装 [命令行输入] npm install vue-re ...

  10. 编程小白入门分享四:Vue的安装及使用快速入门

    一.VUE简介 vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立 ...

随机推荐

  1. java中的静态代理和动态代理

    1.动态代理的定义:为其他对象提供一个代理以控制对这个对象的访问 代理类主要负责委托类的预处理消息,过滤消息,把消息传给委托类以及消息事后处理 按照代理类的创建时期,代理类可以分为2种:静态代理类(在 ...

  2. 测量应用程序cass和cad的使用感受

    作为一名测绘工程专业的学生,在现在的电子信息时代是会经常与测量绘图有关的软件打交道的,如今我也算是接触绘图软件一年多了并且在上学期学校还组织我们大家一起进行了几周CAD集训,而且在校园和井陉的暑期实训 ...

  3. CentOS使用systemctl daemon-reload报错Error getting authority: Error initializing authority: Error calling StartServiceByName for org.freedesktop.PolicyKit1: Timeout was reached (g-io-error-quark, 24)解决办法

    CentOS修改了系统启动文件后需要重载报错 systemctl daemon-reload Error getting authority: Error initializing authority ...

  4. [人工智能] 安装python jupyter

    1.  什么是python jupyter ? 简单的说,可以理解为一个IDE. http://jupyter.org/ 2.  安装python jupyter notebook http://ju ...

  5. office 2016密钥

    Office 2016 Pro Plus Retail 版激活密钥:[Key]:3XJTG-YNBMY-TBH9M-CWB2Y-YWRHH[Key]:6TCQ3-NBBJ2-RTJCM-HFRKV-G ...

  6. PHP中new self()和new static()的区别探究

    1.new static()是在PHP5.3版本中引入的新特性. 2.无论是new static()还是new self(),都是new了一个新的对象. 3.这两个方法new出来的对象有什么区别呢,说 ...

  7. Keras序列模型学习

    转自:https://keras.io/zh/getting-started/sequential-model-guide/ 1.顺序模型是多个网络层的线性堆叠. 你可以通过将网络层实例的列表传递给  ...

  8. JavaScript 常用数组函数方法专题

    1. 由字符串生成数组 split() 分割字符串,并将分割的部分作为一个元素保存在一个新建的数组中. var str1 = "this is an emample to using the ...

  9. 利用spring实现服务启动就自动执行某些操作的2种方式

    第一种方式,用bean的init-method属性 <bean class="com.emax.paycenter.log.LogBridge" init-method=&q ...

  10. 初识github之项目创建

    登录github后,点击左上角logo章鱼猫,进入主页面,点击start a project ,此时进入新建项目的页面.在repostory name这一栏上写下你想创建的项目的名字.然后在descr ...