微信小程序|开发实战篇之request请求（单个、多个参数，json对象，header）

前言

小程序发送网络请求常会遇到的问题：

1. 请求的url输入的不对。比如应该是http://localhost:8081/user/all。url拼接时漏写了"/"导致Bad Request结果。这时修改为正确的url即可。
2. 请求的方法选择的不对，后端声明了POST，却使用GET请求。这时修改method与后端一致。
3. 我习惯加上dataType属性。
4. data属性的输入格式问题。详情见下面的分析。
5. header中的content-type类型。
6. 注意数据序列化、反序列化时的数据类型对应问题。比如前端json对象中使用String类型存储数据，后端的数据使用Long类型存储数据，此时后端就会报错，产生序列化错误。

content-type类型	类型支持的数据
‘content-type’: ‘application/json’	json对象数据
‘content-type’: ‘application/x-www-form-urlencoded’	键值对数据、表格

以下是小程序request请求模板：

 wx.request({
      url: config.server_url + url,
      method: method,
      data: data,
      dataType:'json',
      header: {
        'content-type': headType,
        'headerUserId': user.id,
        'headerUserToken': user.userToken
      },
      success:(res) => {
      
      },
      fail:(res) => {
      
      }
 });
 

1、发送单个、多个参数的request

这里的单个、多个参数的request是指发送的是键值对数据。如果后端使用的是Spring框架，则是对应着单个或多个的@RequestParam(value = "userId", required = true) String userId注解。

对应模板做出改变：

1. headType使用'content-type': 'application/x-www-form-urlencoded' 。
2. data需要进行键值对处理。userId为123456789，需要处理成data = {userId: 123456789}

headType = 'content-type': 'application/x-www-form-urlencoded';

data = {
	userId: 123456789
};

data_types = {
	userId: 123456789,
	uaId: 444555
};

 wx.request({
      url: config.server_url + url,
      method: method,
      data: data,
      dataType:'json',
      header: {
        'content-type': headType
      },
      success:(res) => {
      
      },
      fail:(res) => {
      
      }
 });
 

2、发送JSON对象的request

这里的JSON对象的request是指发送的是JSON对象数据。如果后端使用的是Spring框架，则是对应着@RequestBody Users users注解。

对应模板做出改变：

1. headType使用'content-type': 'application/json' 。
2. data需要进行键值对处理。userId为123456789，需要处理成data = {userId: 123456789}。
3. 还需要将data对象JSON化，使用 var users = JSON.stringify(data);

headType = 'content-type': 'application/json';

data = {
	users: users
};

var users = JSON.stringify(data);

 wx.request({
      url: config.server_url + url,
      method: method,
      data: users,
      dataType:'json',
      header: {
        'content-type': headType
      },
      success:(res) => {
      
      },
      fail:(res) => {
      
      }
 });
 

3、发送header的request

header: {
        'content-type': headType,
        'headerUserId': user.id,
        'headerUserToken': user.userToken
      },