vue发送ajax请求
程序员文章站
2024-01-01 20:22:22
一、vue-resource 1、简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护。 2、使用流程 step1:安装 step2:引入 step3:编码 step4:完整代码 step5:截图: 请求正常 点击链接跳转 使用错误的地址 弹出错误提示框 二、axios 1 ......
一、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 一样,此处不重复截图。
推荐阅读
-
vue发送ajax请求
-
vue与后台通讯ajax下载和简单使用
-
使用C#发送Http请求实现模拟登陆实例
-
PHP开发框架kohana中处理ajax请求的例子,kohanaajax
-
php curl 发送post请求
-
使用Ajax请求后台数据,然后的时候出现Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0的错误。
-
Ajax相关——get请求和post请求的区别
-
ajax跨域请求js拒绝访问的解决方法
-
js与jQuery实现的兼容多浏览器Ajax请求实例
-
jquery的ajax请求全面了解_jquery