一、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】
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('请求失败');
},
);
}
}
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】
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('请求失败');
},
);
}
}
step5:截图与上面的 vue-resource 一样,此处不重复截图。