爬坑之路-----Vue 方法的封装 + axios异步回调获取数据

封装

首先是在assets文件夹中新建一个叫getLogindData.js的文件

 /****先定义 一个方法*****/
 let getLogindData = () => {
    console.log('hello vue');
}
/***把方法 export 出去***/
export default {getLogindData}

然后我们要调用这个js的方法,在compoments新建一个login.vue文件

/****引入getLogindData.js*****/

import Vue from 'vue'
import getLogindData from '../assets/js/getData'
/***给vue对象添加$get方法，这个不可少，跟引入axios插件一样***/
    Vue.prototype.$get = getLogindData

/***在vue调用这个方法咯***/
methods:{
submit: function () {
  this.$get.getLogindData();
   })
}
/****好了，这里就可以调用到封装的方法了***/

异步回调获取数据

promise提供了resolve(成功处理) 和 reject（失败处理）两个参数来回调.then .catch的结果

/***插入异步方法，promise不可以忘记哦***/
import Vue from 'vue'
import axios from 'axios'
Vue.http = Vue.prototype.$http = axios

let getLogindData = (api) => {
  return new Promise((resolve, reject) => {
    Vue.http.get('http://localhost:8080/' + api).then(response => {
      resolve(response.data.message)
    }).catch(function (error) {
      reject(error)
    })
  })
}
export default {getLogindData}

/***这时候把vue文件中的方法用  .then来处理回调的数据***/
 this.$get.getLogindData('api/login').then(function (res) {
              console.log(res)
            })

你懂了么？好吧，反正我是懂了，自己爬坑很慢的还是希望你们能一下就看懂不用爬