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. 【发包工具】http多线程发包工具

    [发包工具]http多线程发包工具 使用方法:输入地址,发送的内容,线程数,等待时间,每个线程发送的次数,GET/POST请求. 源代码 package com.xmxkkk.httptest; im ...

  2. 编写高质量代码_改善C++程序的150个建议 读书笔记

    这几天看了下这本书<编写高质量代码_改善C++程序的150个建议>,觉的蛮有收获的,再次记录下自己以前不清晰的知识点,以供学习. 编写符合标准的main函数 C语言标准规定了main函数的 ...

  3. Java编程思想学习笔记——访问权限修饰词

    几种访问权限修饰词 public,protected,private,friendly(Java中并无该修饰词,即包访问权限,不提供任何访问修饰词) 使用时,放置在类中成员(域或方法)的定义之前的,仅 ...

  4. windows server 2003R2\2008R2\2012\2016 安装【故障转移群集】cluster

    温故而知新! 靠,突然觉得it技能只要一年的时间就能忘记! virtualbox虚拟机安装群集,注意点: clone的虚拟机,sid问题.sysprep太慢了,不如重新安装快! 虚拟机增强组件,会影响 ...

  5. xml文件加密上传和sftp下载解密基本思路

    AES对称加密效率高,对大文件加密适合.RSA非对称加密效率低,更安全,对小文件加密适合. 整理 11:12 2016/8/4 加密:1.xml xml.md5摘要 2.(xml)aes加密 (xml ...

  6. Ubuntu下用matplotlib作图时显示中文

    之前在Ubuntu下用matplotlib作图的时候发现无法正常显示中文,查了一番以后发现是Ubuntu系统和matplotlib库没有共同可显示的中文字体库的原因.用此文章的方法可以解决这一问题. ...

  7. 安装MySQL-python: EnvironmentError:mysql config not found

    1执行 sudo yum install python-devel 2 find / -name mysql_config 在/usr/bin/下发现了这个文件 3. 后修改MySQL-python- ...

  8. MTK 精简ROM

    PhaseBeam.apk--------------------------------------动态壁纸光之韵律(可删) Phone.apk--------------------------- ...

  9. 排列2(全排列next_permutation 注意格式)

    排列2 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  10. 随笔 -- NIO -- 相关 -- 系统概述

    .打开Selector .打开ServerSocketChannel .获取与此Channel关联的ServerSocket并绑定地址 .设置Channel为非阻塞 .将Channel注册到Selec ...