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

来源：互联网发布：淘宝怎么过高编辑：程序博客网时间：2024/06/14 03:33

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

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的错误处理

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

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

Summary

只是在简单使用上面做了总结后续继续完善

20170629 补充了handleErrors部分来自github官网有时间贴demo

1 0