vue-resource和axios的简单使用方法总结_axios、vue-resource

vue-resource和vue-axios的简单使用方法

vue-resource的使用

首先要在main.js中引入

import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource);
1
2
3
4
5

然后在组件中才能使用

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

vue-axios的使用

首先要在main.js中引入 But axios不能使用use方法

1. Vue.prototype方法

import Vue from 'vue';

import axios from 'axios';

Vue.prototype.$axios = axios;

1
2
3
4
5
6
7
8

然后在组件中才能使用

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

vue-axios的错误处理

why? 实现网络不可达,网络无响应等等情况下的处理机制

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);
    });    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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
    }
})

1
2
3
4
5
6
7
8
9

Summary

1. 只是在简单使用上面做了总结 后续继续完善
2. 20170629 补充了handleErrors部分 来自github官网 有时间贴demo