vue-resource的使用
首先要在main.js中引入
import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);然后在组件中才能使用
<template lang="html">
</template>
<script>
export default {
data(){
return{
}
},
methods:{
loadData(){
this.$http.get('/url').then((response) => {
// success
console.log(response.body.data);
}),(error => {
// error
console.log(error);
})
}
}
}
</script>
<style lang="css">
</style>
vue-axios的使用
首先要在main.js中引入 But axios不能使用use方法
- Vue.prototype方法
import Vue from 'vue';
import axios from 'axios';
Vue.prototype.$axios = axios;
然后在组件中才能使用
<template lang="html">
</template>
<script>
export default {
data(){
return{
}
},
methods:{
loadData(){
this.$axios.get(['/static/data/user.json'])
.then((response) => {
// success
console.log(response.data);
})
.catch((error) => {
//error
console.log(error);
})
}
}
}
</script>
<style lang="css">
</style>
vue-axios的错误处理
实现网络不可达,网络无响应等等情况下的处理机制
Handling Errors
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status); // 状态码
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});
You can define a custom HTTP status code error range using the validateStatus config option. –自定义选项
axios.get('/user/12345', {
validateStatus: function (status) {
return status < 500; // Reject only if the status code is greater than or equal to 500
}
})