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. Gym 101775B - Scapegoat - [贪心+优先队列]

    题目链接:http://codeforces.com/gym/101775/problem/B Aori is very careless so she is always making troubl ...

  2. Win7升Windows10有获取通知,但是就不推送的解决方法

    1. 删除“C:\Windows\SoftwareDistribution\Download”下所有文件2. 以管理员身份运行命令提示符,输入“wuauclt.exe /updatenow”并回车(注 ...

  3. 15.3-uC/OS-III资源管理(多值信号量)

    多值信号量是 uC/OS 操作系统的一个内核对象, 主要用于标志事件的发生和共享资源管理. 1.如果想要使用多值信号量,就必须事先使能多值信号量. 多值信号量的使能位于“os_cfg.h”. 2.OS ...

  4. xutils android studio引用问题

    然后rebuild--->关闭项目-->重启,ok public class MyApplication extends Application { @Override public vo ...

  5. 用git如何把单个文件回退到某一版本

    暂定此文件为a.jsp 1.首先到a.jsp所在目录: 通过 git  log a.jsp 查看a.jsp的更改记录 2.找到想要回退的版本号:例如 fcd2093 通过 git reset  fcd ...

  6. this inspection detects names that should resolved but don't. Due to dynamic dispatch and duck typing, this is possible in a limited but useful number of cases. Top-level and class-level items are sup

    输入第一行代码:import logging;logging.basicConfig(level==logging.INFO) 提示:this inspection detects names tha ...

  7. postman 做接口测试之学习笔记

    Postman 之前是作为Chrome 的一个插件,现在要下载应用才能使用. 以下是postman 的界面: 各个功能区的使用如下: 快捷区: 快捷区提供常用的操作入口,包括运行收藏夹的一组测试数据, ...

  8. git bash支持中文

    打开Git Bash窗口-->右键-->Options-->text Locale:设置为zh_CN Charachter set:设置为UTF-8 保存,重新打开Git Bash, ...

  9. day03 Python字典dict的增删查改及常用操作

    字典是python中唯一的映射类型,采用键值对(key-value)的形式存储数据.python对key进行哈希函数运算,根据计算的结果决定value的存储地址,所以字典是无序存储的,且key必须是可 ...

  10. zw量化交易·实盘操作·系列培训班

    参见: <zw量化交易·实盘操作·系列培训班> http://blog.sina.com.cn/s/blog_7100d4220102w0q5.html