一、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 : ‘‘,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 一样,此处不重复截图。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。