1.静态引用

<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>

2.npm方式安装(推荐)

$ npm install vue-resource --save
-save 是指将包信息添加到 package.json 里的dependencies节点,表示发布时依赖的包。
-save-dev 是指将包信息添加到 package.json 里的 devDependencies节点,表示开发时依赖的包。

3.七种请求API  (详细介绍 : https://www.npmjs.com/package/vue-resource

1.this.$http.get(url, [options]);
2.this.$http.head(url, [options]);
3.this.$http.delete(url, [options]);
4.this.$http.jsonp(url, [options]);
5.this.$http.post(url, [body], [options]);
6.this.$http.put(url, [body], [options]);
7.this.$http.patch(url, [body], [options]);

4.参数

url          ==> 请求URL
method ==> 请求HTTP方式
body ==> request body
params ==> 请求的URL参数对象
headers ==> request header(第三方请求头注入的参数)
timeout ==> 超时(0表示无超时时间)
before ==> 请求发送前的处理函数
progress ==> ProgressEvent回调处理函数
credientials ==> 表示跨域请求是否需要使用凭证
emulateHTTP ==> 发送PUT, PATCH, DELETE请求时以HTTP Post的方式发送, 并设置请求头的X-HTTP-Method-Override
emulateJSON ==> 将request body以application/x-www-form-urlencoded content type发送

二.以下几种请求

1.Get请求

new Vue({
methods: {
// http://192.168.17.112:8010/AlanMall/package.json?userId=101
get: function(){
this.$http.get("package.json", {
// 参数一定写在params里
params: {
userId: "101"
},
// 请求头
headers: {
token: "adcd"
}
}).then(res => {
this.msg = res.data;
}, error => {
this.msg = error;
});
}
}
})

2.Post请求

methods: {
// http://192.168.17.112:8010/AlanMall/package.json?userId=101
post: function(){
this.$http.post("package.json", {
userId: "102"
},{
headers: {
access_token: "post"
}
}).then(function(res){
this.msg = res.data;
}, function(res){
this.msg = res.data;
});
}
}

3.JSONP请求

methods: {
jsonp: function(){
// http://www.imooc.com/course/AjaxCourseMembers?ids=796
this.$http.jsonp("http://taoalan.com/json/alan.php", {
jsonpCallback: "flightHandler"
}).then(res =>{
this.msg = res.data;
}, error =>{
this.msg = error
});
}
}

要求传送的参数中一定要有特定的函数名,可以这样设置:
jsonp设置的是传callback的参数名,jsonpCallback是返回的函数名

this.$http.jsonp(url, {
params:params,
jsonp: 'callBackParam',
jsonpCallback: "getCallBack"
})

4.vue-resource底层http

new Vue({
methods: {
this.$http({
url: "package.json",
params: {
urseId: "103",
},
headers: {
token: "basehttp"
},
timeout: 5,
before: function(){
console.log("http before");
}
}).then(function(res){
this.msg = res.data;
})
}
})

4.全局拦截器 interceptors, 假如页面中有10个请求都有loading, 不可能10个请求中都写一个, 全局拦截器统一处理

new Vue({
mounted: function(){
// 全局请求拦截
Vue.http.interceptors.push(function(request, next){
// 请求前
console.log("request init."); // 请求后
next(function(response){
console.log("request complete.");
return response;
})
})
},
http:{
// 配置全局地址
root: "http://taoalan.com/" // 公共地址
}
})

3-1 vue-resource基础介绍的更多相关文章

  1. [Vue入门及介绍,基础使用、MVVM架构、插值表达式、文本指令、事件指令]

    [Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 ​ 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...

  2. Node.js学习笔记(一)基础介绍

    什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...

  3. Node.js 基础介绍

    什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...

  4. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  5. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  6. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  7. vue项目搭建介绍02

    目录 vue项目搭建介绍02 python-pycharm设置: vue创建项目分类: vue-cli构建 自定义构建 基础的vue项目目录: vue项目搭建介绍02 python-pycharm设置 ...

  8. vue 快速入门 系列 —— vue 的基础应用(上)

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  9. vue 快速入门 系列 —— vue 的基础应用(下)

    其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...

  10. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

随机推荐

  1. VS2010 工程设置

       本篇文章的主要内容转载自 http://blog.csdn.net/waitforfree/article/details/8622059 ,感谢博主的辛苦劳动.此处,对比较重要的部分,进行进一 ...

  2. 【转】Gulp入门基础教程

    Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...

  3. thinkphp3.2 session时间周期无效

    Thinkphp3.2 session周期时间默认是无效的 方法一: 这种方法使用session非常麻烦 1.配置'SESSION_AUTO_START' =>false,2.控制器方法sess ...

  4. [转]好文章:Android的AlertDialog详解

    refer:http://www.2cto.com/kf/201205/131876.html AlertDialog的构造方法全部是Protected的,所以不能直接通过new一个AlertDial ...

  5. mysql执行SQL语句时报错:[Err] 3 - Error writing file '/tmp/MYP0G1B8' (Errcode: 28 - No space left on device)

    问题描述: 今天一同事在mysql中执行SQL语句的时候,报了/tmp空间不足的问题,报错如下: [SQL] SELECT f.prov as 字段1, MAX( CASE f.flag_name W ...

  6. HTML5媒体(音频/视频)

    摘要: 在HTML5出现之前,web媒体大部分通过Flash来实现.这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等.这就导致HTML5自己开始支持媒体功能.HTML5 DO ...

  7. linux 实时查看Tomcat日志信息

    cd /../tomcat/logs 进入tomcat/logs/文件夹下  # tail -f catalina.out

  8. [原]IOS 设备基本信息

    1.获取设备类型  (Iphone/ipad 几?) #import "sys/utsname.h" -(NSString*)getDeviceVersion{    struct ...

  9. 【scala】 scala 类 (五)

    1.scala类 1.class 关键字 2.var 属性 默认生成getter/setter 方法 3.val 属性 默认生成getter 方法 4. 自定义getter /setter 方法 , ...

  10. mysql触发器的使用 想让b字段在更新的时候把旧数据保存到a字段中

    使用mysql希望数据库自动触发一些规则,进行更新数据的时候,就需要用触发器了,比如 将旧数据保存到额外字段中,如何做呢? 在abc表中 name更新的时候 我希望把name的老数据保存到 old_n ...