vue发送ajax请求
一、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() {
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 发ajax请求，用以获取数据，此处地址意思是查询 github中 vue 星数最高的项目</span>
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 </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=></span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
alert(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">请求失败</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
},
);
}
}
</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 </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">default</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
data() {
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">return</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
repositoryUrl : </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">''</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">,
repositoryName : </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">''</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">
}
},
mounted() {
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 发ajax请求，用以获取数据，此处地址意思是查询 github中 vue 星数最高的项目</span>
const url = 'https://api.github.com/search/repositories?q=vue&sort=stars';
axios.get(url).then(
response </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=></span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
const result </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> response.data.items[</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">0</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">];
console.log(result)
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">this</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">.repositoryUrl </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> result.html_url;
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">this</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">.repositoryName </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> result.name;
}
).</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">catch</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(
response </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=></span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
alert(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">请求失败</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">'</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
},
);
}
}
</script>
<style>
</style>
step5：截图与上面的 vue-resource 一样，此处不重复截图。
3、axios 解决跨域问题
参考： https://www.cnblogs.com/l-y-h/p/11815452.html
4、axios 项目中封装使用
参考：