vue发送ajax请求
2024-10-19 17:38:33
一、vue-resource
1、简介
一款vue插件，用于处理ajax请求，vue1.x时广泛应用，现不被维护。
2、使用流程
step1：安装
【命令行输入】
npm install vue-resource --save
step2：引入
【main.js】
// 引入vue-resource
import VueResource from 'vue-resource' // 使用vue-resource
Vue.use(VueResource)
step3：编码
【格式：】
this.$http.get().then() 返回的是一个Promise对象
step4：完整代码
【使用vue-cli创建项目】
https://www.cnblogs.com/l-y-h/p/11241503.html 【main.js】
import Vue from 'vue'
import App from './App.vue'
// 引入vue-resource
import VueResource from 'vue-resource' // 使用vue-resource
Vue.use(VueResource)
Vue.config.productionTip = false new Vue({
render: h => h(App),
}).$mount('#app') 【App.vue】
<template>
<div>
<div v-if="!repositoryUrl">loading...</div>
<div v-else>most star repository is <a :href="repositoryUrl">{{repositoryName}}</a></div>
</div>
<!--App -->
</template> <script>
export default {
data() {
return {
repositoryUrl : '',
repositoryName : ''
}
}, mounted() {
// 发ajax请求，用以获取数据，此处地址意思是查询 github中 vue 星数最高的项目
const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';
this.$http.get(url).then(
response => {
const result = response.data.items[0];
console.log(result)
this.repositoryUrl = result.html_url;
this.repositoryName = result.name;
}, response => {
alert('请求失败');
},
);
}
}
</script> <style> </style>
step5：截图：
请求正常
点击链接跳转
使用错误的地址
弹出错误提示框
二、axios
1、简介
一款vue库，用于处理ajax请求，vue2.x时广泛应用。
2、流程
step1：安装
【命令行输入】
npm install axios --save
step2：引入
【在哪里使用，就在哪里引入】
import axios from 'axios';
step3：完整代码
【main.js】
import Vue from 'vue'
import App from './App.vue' Vue.config.productionTip = false new Vue({
render: h => h(App),
}).$mount('#app') 【App.vue】
<template>
<div>
<div v-if="!repositoryUrl">loading...</div>
<div v-else>most star repository is <a :href="repositoryUrl">{{repositoryName}}</a></div>
</div>
<!--App -->
</template> <script>
import axios from 'axios'; export default {
data() {
return {
repositoryUrl : '',
repositoryName : ''
}
}, mounted() {
// 发ajax请求，用以获取数据，此处地址意思是查询 github中 vue 星数最高的项目
const url = 'https://api.github.com/search/repositories?q=vue&sort=stars'; axios.get(url).then(
response => {
const result = response.data.items[0];
console.log(result)
this.repositoryUrl = result.html_url;
this.repositoryName = result.name;
}
).catch(
response => {
alert('请求失败');
},
);
}
}
</script> <style> </style>
step5：截图与上面的 vue-resource 一样，此处不重复截图。
3、axios 解决跨域问题
参考： https://www.cnblogs.com/l-y-h/p/11815452.html
最新文章
- Nginx模块之———— RTMP 模块的在线统计功能 stat 数据流数据的获取（不同节点则获取的方式不同）
- Intellij IDEA +MAVEN+Jetty实现Mybatis的HelloWorld
- Easyui datebox 限制时间选择范围
- [实变函数]5.5 Riemann 积分和 Lebesgue 积分
- Javascript生成GUID
- 作品第一课----循环改变DIV颜色
- 开心菜鸟系列－－－－变量的解读（javascript入门篇）
- WPF笔记(2.9和2.10)——Layout
- 快速部署Python应用：Nginx+uWSGI配置详解
- enum的java例子
- Netty（二）——TCP粘包/拆包
- Python资料汇总（建议收藏）
- vue——props的两种常用方法
- 【Javascript】在文本框光标处插入文字并定位光标 (转)
- JavaScript变量提升的本质
- Entity Framework分页扩展
- PowerShell禁止执行脚本解决方法
- day11 函数的参数列表
- C# 加载静态资源问题
- 把多个字符串里面的项写到不同的对象中，然后在push到一个数组中