3-1 vue-resource基础介绍
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基础介绍的更多相关文章
- [Vue入门及介绍,基础使用、MVVM架构、插值表达式、文本指令、事件指令]
[Vue入门及介绍,基础使用.MVVM架构.插值表达式.文本指令.事件指令] 1)定义:javascript渐进式框架 渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面 ...
- Node.js学习笔记(一)基础介绍
什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...
- Node.js 基础介绍
什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- vue项目搭建介绍02
目录 vue项目搭建介绍02 python-pycharm设置: vue创建项目分类: vue-cli构建 自定义构建 基础的vue项目目录: vue项目搭建介绍02 python-pycharm设置 ...
- vue 快速入门 系列 —— vue 的基础应用(上)
其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
- vue 快速入门 系列 —— vue 的基础应用(下)
其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...
- Web3D编程入门总结——WebGL与Three.js基础介绍
/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...
随机推荐
- 【发包工具】http多线程发包工具
[发包工具]http多线程发包工具 使用方法:输入地址,发送的内容,线程数,等待时间,每个线程发送的次数,GET/POST请求. 源代码 package com.xmxkkk.httptest; im ...
- 编写高质量代码_改善C++程序的150个建议 读书笔记
这几天看了下这本书<编写高质量代码_改善C++程序的150个建议>,觉的蛮有收获的,再次记录下自己以前不清晰的知识点,以供学习. 编写符合标准的main函数 C语言标准规定了main函数的 ...
- Java编程思想学习笔记——访问权限修饰词
几种访问权限修饰词 public,protected,private,friendly(Java中并无该修饰词,即包访问权限,不提供任何访问修饰词) 使用时,放置在类中成员(域或方法)的定义之前的,仅 ...
- windows server 2003R2\2008R2\2012\2016 安装【故障转移群集】cluster
温故而知新! 靠,突然觉得it技能只要一年的时间就能忘记! virtualbox虚拟机安装群集,注意点: clone的虚拟机,sid问题.sysprep太慢了,不如重新安装快! 虚拟机增强组件,会影响 ...
- xml文件加密上传和sftp下载解密基本思路
AES对称加密效率高,对大文件加密适合.RSA非对称加密效率低,更安全,对小文件加密适合. 整理 11:12 2016/8/4 加密:1.xml xml.md5摘要 2.(xml)aes加密 (xml ...
- Ubuntu下用matplotlib作图时显示中文
之前在Ubuntu下用matplotlib作图的时候发现无法正常显示中文,查了一番以后发现是Ubuntu系统和matplotlib库没有共同可显示的中文字体库的原因.用此文章的方法可以解决这一问题. ...
- 安装MySQL-python: EnvironmentError:mysql config not found
1执行 sudo yum install python-devel 2 find / -name mysql_config 在/usr/bin/下发现了这个文件 3. 后修改MySQL-python- ...
- MTK 精简ROM
PhaseBeam.apk--------------------------------------动态壁纸光之韵律(可删) Phone.apk--------------------------- ...
- 排列2(全排列next_permutation 注意格式)
排列2 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- 随笔 -- NIO -- 相关 -- 系统概述
.打开Selector .打开ServerSocketChannel .获取与此Channel关联的ServerSocket并绑定地址 .设置Channel为非阻塞 .将Channel注册到Selec ...