标题：vue中http请求
出处：刘新修
时间：Wed, 28 Aug 2019 13:31:38 +0000
作者：刘新修
地址：http://pic1.liuxinxiu.com:80/s/290/

内容：
 前后端采用异步接口进行数据交互，传统情况下，我们采用jquery中的$.ajax()方法来进行异步请求。而在vue中我们并没有引入jquery而是采用了vue的插件vue-resource，它同样对异步请求进行了封装，方便我们同服务端进行数据交互。
1、引用及使用
C#代码
cnpm install vue-resource --save-dev   
在项目根目录下/src/main.js中：
JavaScript代码
import VueResource from 'vue-resource'  Vue.use(VueResource)  
此时在vue文件中就可以使用this.$http()进行网络请求。
2、通常在项目中是需要将http请求进行封装的。
为了封装成全局因此使用vuex。
参照 vue的一些总结 这个文章进行配置vuex
配置成功后，将main.js中的VueResource内容去掉，写在vuex中的store.js中
store.js内容如下
JavaScript代码
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请求的方法
JavaScript代码
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的文件中调用：
JavaScript代码
<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请求，其它请求没有做验证。



Generated by Bo-blog 2.1.1 Release