vue中http请求

前后端采用异步接口进行数据交互，传统情况下，我们采用jquery中的$.ajax()方法来进行异步请求。而在vue中我们并没有引入jquery而是采用了vue的插件vue-resource，它同样对异步请求进行了封装，方便我们同服务端进行数据交互。

1、引用及使用

cnpm install vue-resource --save-dev 

在项目根目录下/src/main.js中：

import VueResource from 'vue-resource'
Vue.use(VueResource) 

此时在vue文件中就可以使用this.$http()进行网络请求。

2、通常在项目中是需要将http请求进行封装的。

为了封装成全局因此使用vuex。

参照 vue的一些总结 这个文章进行配置vuex

配置成功后，将main.js中的VueResource内容去掉，写在vuex中的store.js中

store.js内容如下

import Vue from 'vue'
import Vuex from 'vuex'
import VueResource from 'vue-resource'
Vue.use(Vuex)
Vue.use(VueResource)
export default new Vuex.Store({
  state: {
    url: 'www.baidu.com'
  },
  mutations: {
    setUrl (state, res) {
      // 该方法用来改变全局变量的值
      state.url = res
    }
  }
})

3、在store.js中封装http请求的方法

import Vue from 'vue'
import Vuex from 'vuex'
import VueResource from 'vue-resource'
Vue.use(Vuex)
Vue.use(VueResource)
export default new Vuex.Store({
  state: {
    // url: 'www.baidu.com'
  },
  mutations: {
    // setUrl (state, res) {
    //   // 该方法用来改变全局变量的值
    //   state.url = res
    // },
    get(state, data) {
      Vue.http({
        method: 'GET',
        url: data.url,
        emulateJSON: true
      })
        .then(function (success) {
        // console.log("成功",success)
          data.success(success.body);
        }, function (error) {
        // console.log("错误",error)
          data.error(error.body);
        })
      /*
      Vue.http.get("http://test.dcsf.hebeiwanteng.com/api/common/wxParking/getNowTime")
        .then((success)=>{
          console.log("成功",success)
        })
        .catch((error)=>{
          console.log("失败",error)
        })
      */
    },
    post(state, data) {
      Vue.http({
        method: 'POST',
        url: data.url,
        params: data.data,
        emulateJSON: true
      }).then(function (success) {
          data.success(success.body);
        }, function (error) {
          data.error(error.body);
        })
    },
    delete(state, data) {
      Vue.http({
        method: 'DELETE',
        url: data.url,
        params: data.data,
        emulateJSON: true
      }).then(function (success) {
          data.success(success.body);
        }, function (error) {
          data.error(error.body);
        })
    },
    put(state, data) {
      Vue.http({
        method: 'PUT',
        url: data.url,
        params: data.data,
        emulateJSON: true
      }).then(function (success) {
          data.success(success.body);
        }, function (error) {
          data.error(error.body);
        })
    },
  }
})

此时封装好了http请求。

在vue的文件中调用：

<script>
  import { mapState, mapMutations } from 'vuex'
  export default {
    name: 'HelloWorld',
    data () {
      return {
      }
    },
    methods: {
      ...mapMutations(['get','post','delete','put']), //引入方法
    },
    created() {
      let _this = this;
      _this.get({
        url:"此处写请求地址",
        success(success) {
          console.log("成功",success)
        },
        error(error) {
          console.log("错误",error)
        }
      });
    }
  }
</script>

4、注意：在store.js中使用Vue.http和在vue文件中使用this.$http是一样的。

5、该方法只验证了get请求，其它请求没有做验证。