vue-resource和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方法

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