vue发送ajax请求
发布时间:2020-12-16 02:44:57 所属栏目:百科 来源:网络整理
导读:一、vue-resource 1、简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护。 2、使用流程 step1:安装 【命令行输入】npm install vue-resource --save step2:引入 【main.js】// 引入vue-resourceimport VueResource from ‘vue-resource‘
一、vue-resource1、简介一款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:截图: ? ?请求正常 ? ?点击链接跳转 ? ?使用错误的地址 ? ?弹出错误提示框 ? ? 二、axios1、简介一款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 一样,此处不重复截图。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |