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

Posted 2020-09-13 wmui

两者其实差别不大，都是基于es6的Promise对象实现的方法

vue-resource:

main.js =>

import Vue from ‘vue‘;

import VueResource from ‘vue-resource‘;

Vue.use(VueResource);

组件里面使用=>

<template>
    <div>{{myData}}</div>
</template>
<script>
    export default {
        data() {
            return {
                myData:{}
            }
        },
        created() {      
            this.$http.get(url).then((response) => {
                // success
              this.myData = response.body.data;
            },(error) => {
                // error
                console.log(error)
            });
        }
    }
</script>

官方传送门

vue-axios:

axios不能使用use方法

main.js=>

import Vue from ‘vue‘;

import axios from ‘axios‘;

Vue.prototype.$axios = axios;

组件里面使用=>

<template>
  <div>{{myData}}</div>
</template>
<script>
export default {
  data() {
      return {
        myData: {}
      }
    },
    created() {
      this.$axios.get(url).then((response) => {
        // success
        this.myData = response.data.data;
      }, (error) => {
        // error
        console.log(error)
      });
    }
</script>

官方传送门