vue中使用vue-resource、axios、fetch-jsonp请求数据
时间:2019-03-25
本文章向大家介绍vue中使用vue-resource、axios、fetch-jsonp请求数据,主要包括vue中使用vue-resource、axios、fetch-jsonp请求数据使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.使用vue-resource
- 安装vue-resource:
cnpm install vue-resource --save
- 去main.js文件配置vueResource(先导入,再使用):
//导入vue-resouece
import vueResource from 'vue-resource';
//使用 与整个Vue实例进行关联,关联之后才能用vueResource进行请求
Vue.use(vueResource);
- 创建Mock.vue文件,在其中使用:
Mock.vue:可在src目录下新建一个文件名为MyComponents,在文件中新建一个文件夹,可命名为Mock.vue
- 在App.vue中进行导入与配置:
方法见:“vue中创建单文件组件、注册组件、使用组件”
<template>
<div id="app">
<!-- 组件的使用 -->
<v-Mock></v-Mock>
</div>
</template>
<script>
// 导入组件
import Mock from './MyComponents/Mock.vue';
export default{
name:"App",
// 注册组件
components:{
'v-Mock':Mock
}
}
}
</script>
<style>
</style>
- 在Mock.vue中请求数据:
<template>
<div id="Mock">
<p>{{msg}}</p>
</div>
</template>
<script>
export default{
name:"Mock",
data(){
return{
msg:"我是Mock组件"
}
},
mounted(){
// 使用远程路径请求
let url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
this.$http.get(url).then((response)=>{
console.log(response.body.result);
});
// 使用模拟数据请求 /user、/list为“vue中使用mock模拟数据”中模拟的两个接口
//then表示请求完成之后,相当于success
this.$http.post("/user").then((response)=>{
console.log(response.body.data);
});
this.$http.post("/list").then((response)=>{
console.log(response.body);
});
}
}
</script>
<style>
</style>
2.使用axios
请求mock数据、远程api、支持的是cross跨域
- 安装axios:
cnpm install axios --save
- 创建Axios.vue文件,在其中使用:
Axios.vue:可在src目录下新建一个文件名为MyComponents,在文件中新建一个文件夹,可命名为Axios.vue
- 在App.vue中进行导入与配置:
方法见:vue中创建单文件组件、注册组件、使用组件
<template>
<div id="app">
<v-Axios></v-Axios>
</div>
</template>
<script>
import Axios from './MyComponents/Axios.vue';
export default{
name:"App",
components:{
'v-Axios':Axios
}
}
}
</script>
- 导入axios:
在哪里使用,在哪里导入
import axios from 'axios'
- 在Axios.vue中请求数据:
局部axios
<template>
<div id="axios">
<p>{{msg}}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
name:"Axios",
data(){
return{
msg:"Axios插件"
}
},
mounted(){
// 使用远程路径请求
let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
axios.get(api).then((res)=>{
console.log(res.data.result);
});
}
}
</script>
Q:怎样将局部axios打包成全局axios?
A:去main.js文件配置axios:
//配置axios 全局使用 $后的名字为自定义
import axios from 'axios';
Vue.prototype.$axios=axios;
使用时需写为:
<template>
<div id="axios">
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name:"Axios",
data(){
return{
msg:"Axios插件"
}
},
mounted(){
// 使用远程路径请求
let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
this.$axios.get(api).then((res)=>{
console.log(res);
});
// 使用模拟数据请求 /user、/list为“vue中使用mock模拟数据”中模拟的两个接口
this.$axios.post("/user").then((res)=>{
console.log(res.data.data);
});
this.$axios.post("/list").then((res)=>{
console.log(res.data);
});
}
}
</script>
3.使用Fetch-jsonp
请求mock数据、远程api、支持的是jsonp跨域
- 安装fetch-jsonp:
cnpm install fetch-jsonp --save
- 创建Fetchjsonp .vue文件,在其中使用:
Fetchjsonp .vue:可在src目录下新建一个文件名为MyComponents,在文件中新建一个文件夹,可命名为Fetchjsonp .vue
- 导入fetch-jsonp:
在哪里使用,在哪里导入
import Fetchjsonp from 'fetch-jsonp'
- 在Fetchjsonp.vue中请求数据:
<template>
<div id="Fetchjsonp">
<p>{{msg}}</p>
</div>
</template>
<script>
import Fetchjsonp from 'fetch-jsonp';
export default {
name:"Fetchjsonp",
data(){
return{
msg:"Fetchjsonp"
}
},
mounted(){
let api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
Fetchjsonp(api).then((res)=>{
return res.json();
}).then((res)=>{
console.log(res);
});
}
}
</script>
- Joomla 权限提升漏洞(CVE-2016-9838)分析
- Firefox - SVG cross domain cookie vulnerability
- 当代 Web 的 JSON 劫持技巧
- 利用特殊协议加载本地文件, 绕过 HTML5 沙箱, 打开弹窗诸事
- Nginx权限提升漏洞(CVE-2016-1247 )分析
- 初识 Fuzzing 工具 WinAFL
- 如何使用Oozie API接口向Kerberos环境的CDH集群提交Spark2作业
- 如何编译及使用TPC-DS生成测试数据
- ASP.NET MVC编程——缓存
- ASP.NET MVC编程——错误处理与日记
- Jenkins 未授权远程代码执行漏洞(CVE-2017-1000353)
- ASP.NET MVC编程——路由
- ASP.NET MVC编程——模型
- ASP.NET MVC编程——验证、授权与安全
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux检查Swap交换空间的五个命令小结
- seaborn数据总体分布的可视化策略
- 配置 Apache 服务器禁止所有非法域名 访问自己的服务器
- Ubuntu16.04源码安装Mininet
- Kotlin基础学习之Deprecated与Suppress注解使用
- Centos 7下利用crontab定时执行任务详解
- 树莓派无线上网时无屏幕下发现树莓派IP的方法
- Ubuntu18.04安装opencv 3.2.0的解决方法
- Android MVP BaseFragment 通用式封装的实现
- 腾讯云服务器Centos挂载数据盘的方法
- CentOS 8.0.1905 安装 ZABBIX4.4版本 (已验证)
- seaborn分类变量的汇总展示
- Linux查看PCIe版本及速率的方法
- android自定义滚轴选择器
- 虚拟机安装Linux rhel7.3操作系统(具体步骤)