vue 封装axios和自定义函数的两种方式

Posted 仅仅菜鸡

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 封装axios和自定义函数的两种方式相关的知识,希望对你有一定的参考价值。

在项目中难免有一些重复的操作,比如读取数据等,此时把这些操作封装起来就很有必要了

1.在main.js中封装,在vue页面中获取数据(优点:不需要import操作,挂载在this中,可以获取vue对象,然后封装一些自定义操作)

  main.js中:

  import Vue from ‘vue‘

  import Axios from ‘axios‘

  import ElementUI from ‘element-ui‘

  var that;
  Vue.prototype.loading = (e) => {
     that = e;
  }

  Vue.prototype.getData = (Url, Params) => {
    return new Promise ((resolve,reject) => {
      Axios.get(Url,
        {
          params: Params
        }
      )
      .then(function(data) {
        data.data.data ? data = data.data.data : data = data.data;
        if(data.length === 0) {
          Vue.prototype.$message({
            message: ‘暂无数据!‘,
            type: ‘warning‘
          });
          return false;
        }
        resolve(data)
      })
      .catch(function (err) {
        console.log(err)
       });
    })
  }

  vue页面中:

  mounted() {

    this.loading(this);
    this.getData(this.$store.state.Url3 + ‘station/findStationAll‘).then(data => {
      console.log(data)
    })
  },

  此时已经成功获取了接口中的数据

2.在外部js中封装(优点:也可以获取vue对象,然后封装一些自定义操作,比如在js文件中获取到接口数据后对vue页面中的数据进行操作)

  js文件: 

    var Vue;
    export var loading = function(e) {
      Vue = e;
    }

    export var getData = function(Url, Params) {
      Vue.axios.get(Url,
        {
          params: Params
        }
      )
      .then(function(data) {

        Vue.listData = [];  // 清空数组
        Vue.pages.maxNum = res.total; // 修改分页器最大条数

        data.data.data ? data = data.data.data : data = data.data;
        if(data.length === 0) {
          Vue.$message({
            message: ‘暂无数据!‘,
            type: ‘warning‘
          });
          return false;
        }
        Vue.receiveData(Url.substring(Url.lastIndexOf(‘/‘) + 1, Url.length), data); // 把接口地址返回用来区分返回值
      })
      .catch(function (err) {
        console.log(err)
      });
    }

  vue文件:

  import { loading, getData } from ‘../../../static/js/main‘

  methods: {  

    // 获取数据
    getData() {      

      let Params = {
        // 传递的参数
      };
      getData(this.$store.state.Url3 + ‘station/findStationAll‘‘, Params);

    },

    // 接收数据
    receiveData(Url, data) {

      if(Url === ‘findStationAll‘) {

        console.log(data) // 得到数据

      }

    }

  },

  mounted() {
    loading(this); // 把vue对象注入函数
    this.getData();
  },

以上是关于vue 封装axios和自定义函数的两种方式的主要内容,如果未能解决你的问题,请参考以下文章

实现SpringBoot项目的多数据源配置的两种方式(dynamic-datasource-spring-boot-starter和自定义注解的方式)

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装

React 自定义组件的两种方式

0139 函数的两种声明方式