vue使用axios发送数据请求

本文章是基于vue-cli脚手架下开发

1.安装

npm install axios --s
npm install vue-axios --s

2.使用.在index.js中(渲染App组件的那个js文件)

import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'

Vue.use(VueAxios, axios);

3.我的项目需求的一个小扩展.在我发起请求的时候.会须要去判断域名.由于微信端开发中.微信要求是html5开头的域名.因此要作一个请求拦截,并在判断若是是html5下域名.访问的接口须要加1层路径.以保证请求正常.仍是在在index.js中(渲染App组件的那个js文件).而且已经use以后.加入代码

//添加一个请求拦截器
Vue.prototype.$http.interceptors.request.use(function(config) {
    // 拦截请求修改地址
    if (/http:\/\/html5.a.com/ig.test(window.location.href) && !/http:\/\//ig.test(config.url)) {
        config.url = 'http://html5.a.com/activity' + config.url
    } else if (/http:\/\/activity.a.com/ig.test(window.location.href) && !/http:\/\//ig.test(config.url)) {
        config.url = 'http://activity.a.com' + config.url
    }
    return config;
}, function(err) {
    return Promise.reject(error);
});

4.get请求

this.$http.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

5.post请求

正常状况下:

this.$http.post('/user', {
    ID: 12345
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

如下遍是坑的解决方法.问题都是由于Headers的Content-Type与服务器的接收的定义不同.致使post请求发过去以后.参数服务器都接收不到.

原帖链接: http://www.cnblogs.com/zhuzhenwei918/p/6869330.html

使用 application/x-www-urlencoded 形式的post请求：

  import qs from 'qs'

　　this.$http .post('/bbg/goods/get_goods_list_wechat', qs.stringify({"data" : JSON.stringify({

"isSingle": 1,
    "sbid": 13729792,
    "catalog3": 45908012,
    "offset": 0,
    "pageSize": 25
  })}), {
    headers: {
      "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
    }
  })
  .then(function (response) {
    // if (response.data.code == 626) {
      console.log(response);
    // }
  }).catch(function (error) {
    console.log(error);
  });

上边是一种解决方法.可是个人队友是java的springMVC服务器.so....无效啊.可是小伙伴说和php服务器通讯的时候是有效的解决了post请求收不到参数的问题.因此参考如下链接文档.把参数包在URLSearchParams中.so....感受与组织取得联系了...

原帖链接:http://www.jianshu.com/p/042632dec9fb

let param = new URLSearchParams();
param.append("activityId", "47");
param.append("type", "recv");
param.append("uid", this.uid);
this.$http.post('/married/getUserHomePage.do?',param).then((response) => {
   console.log(response)
}).catch((error) => {
   console.log(error);
})