小程序怎么在请求的时候传送json

小程序开发中如何优雅地发送JSON请求数据

在微信小程序、支付宝小程序等跨端小程序开发中，与后端API进行数据交互是核心场景之一，而JSON作为轻量级的数据交换格式，因其可读性强、兼容性好，成为前后端数据交互的首选，小程序在发起网络请求时，如何正确地传递JSON数据呢？本文将从请求方法、数据格式、编码处理、错误处理等多个维度,详细拆解小程序中JSON数据传递的实践方案。

明确请求场景：POST/GET与JSON的适配关系

首先需要明确：并非所有HTTP请求都适合用JSON传数据，常见的请求方法中，GET请求通常通过URL的Query参数传值（如?id=123&name=test），而JSON数据更适合通过POST请求的请求体（Request Body）传递，尤其是结构化、复杂的数据对象（如用户信息、订单详情等）。

但在实际开发中，GET请求也可能需要传递JSON数据（例如需要传递复杂查询条件），此时需将JSON对象序列化为字符串，并作为Query参数传递（需注意URL长度限制）,本文重点讲解更常用的POST请求中JSON数据的传递方式。

核心步骤：使用wx.request发起JSON请求

小程序发起网络请求的核心API是wx.request，通过其method、header和data参数即可实现JSON数据的传递,以下是具体步骤和代码示例：

设置请求头：声明Content-Type为application/json

后端服务需要通过请求头中的Content-Type字段识别请求体的数据格式，若传递JSON数据，必须将Content-Type设置为application/json，否则后端可能无法正确解析数据。

wx.request({
  url: 'https://your-api-domain.com/api/user', // 请求地址
  method: 'POST', // 请求方法，POST适合传JSON
  header: {
    'Content-Type': 'application/json', // 关键：声明JSON格式
    'Authorization': 'Bearer your_token' // 可选：其他自定义头（如token）
  },
  // 数据将在data中配置
})

构造JSON数据：直接传入对象或手动序列化

wx.request的data参数支持直接传入JavaScript对象（如{name: '张三', age: 18}），小程序内部会自动将其序列化为JSON字符串；也可以手动使用JSON.stringify()序列化后再传入（两种方式等价，推荐直接传对象）。

示例1：直接传对象（自动序列化）

const requestData = {
  name: '李四',
  age: 25,
  hobbies: ['reading', 'coding'],
  address: {
    city: '北京',
    district: '朝阳区'
  }
};
wx.request({
  url: 'https://your-api-domain.com/api/create-user',
  method: 'POST',
  header: {
    'Content-Type': 'application/json'
  },
  data: requestData, // 直接传入对象，小程序自动转JSON字符串
  success(res) {
    console.log('请求成功', res.data);
  },
  fail(err) {
    console.error('请求失败', err);
  }
});

示例2：手动序列化（特殊场景需用）

若后端要求JSON字符串有特定格式（如缩进、非标准字符编码）,可手动序列化：

const requestData = { name: '王五', age: 30 };
const jsonData = JSON.stringify(requestData, null, 2); // 序列化为带缩进的JSON字符串
wx.request({
  url: 'https://your-api-domain.com/api/create-user',
  method: 'POST',
  header: {
    'Content-Type': 'application/json'
  },
  data: jsonData, // 手动传入序列化后的字符串
  success(res) {
    console.log('请求成功', res.data);
  }
});

GET请求传递JSON：需序列化后作为Query参数

若必须用GET请求传JSON数据（如复杂查询条件），需将JSON对象序列化为字符串，并拼接为URL的Query参数（注意URL编码）：

const queryParams = {
  filter: { status: 'active', dateRange: ['2023-01-01', '2023-12-31'] },
  page: 1,
  pageSize: 10
};
const queryString = encodeURIComponent(JSON.stringify(queryParams)); // URL编码
wx.request({
  url: `https://your-api-domain.com/api/users?data=${queryString}`, // 拼接为Query参数
  method: 'GET',
  success(res) {
    console.log('请求成功', res.data);
  }
});

关键细节：编码、格式与错误处理

中文乱码问题：确保编码一致

若JSON数据中包含中文，后端需确保正确处理UTF-8编码，小程序默认使用UTF-8编码发送数据，后端服务（如Node.js、Java、PHP等）需设置正确的字符集（如response.setCharacterEncoding("UTF-8")）,避免出现中文乱码。

复杂对象处理：嵌套结构与数组

JSON支持嵌套对象和数组，小程序可直接传递复杂结构（如示例1中的address对象和hobbies数组），无需特殊处理,后端需能解析多层JSON。

错误处理：捕获网络与数据异常

网络请求可能因网络问题、参数错误、服务端异常等失败，需通过fail和complete回调处理错误，并校验响应数据的格式：

wx.request({
  url: 'https://your-api-domain.com/api/user',
  method: 'POST',
  header: { 'Content-Type': 'application/json' },
  data: { name: '赵六', age: 28 },
  success(res) {
    // 校验响应数据是否为JSON格式
    if (typeof res.data !== 'object') {
      console.error('响应数据格式错误');
      return;
    }
    console.log('用户ID', res.data.userId);
  },
  fail(err) {
    // 捕获网络错误（如无网络、域名未配置）
    console.error('网络请求失败', err.errMsg);
  },
  complete() {
    // 无论成功失败都会执行，适合隐藏loading
    console.log('请求结束');
  }
});

进阶实践：封装JSON请求工具函数

在实际项目中，为避免重复编写wx.request代码，可封装一个通用的JSON请求工具函数，支持GET/POST、自动处理错误、统一添加token等功能：

// utils/api.js
const request = (url, method, data, header = {}) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      method,
      header: {
        'Content-Type': 'application/json',
        ...header // 合并自定义头（如token）
      },
      data,
      success(res) {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(res);
        }
      },
      fail(err) {
        reject(err);
      }
    });
  });
};
// 封装GET和POST方法
export const get = (url, params = {}) => {
  const queryString = Object.keys(params).length > 0 
    ? '?' + new URLSearchParams(params).toString() 
    : '';
  return request(url + queryString, 'GET');
};
export const post = (url, data) => {
  return request(url, 'POST', data);
};

使用时更简洁：

import { post } from '../../utils/api';
// 创建用户
post('https://your-api-domain.com/api/user', { name: '钱七', age: 32 })
  .then(data => {
    console.log('创建成功', data);
  })
  .catch(err => {
    console.error('请求失败', err);
  });

常见问题与解决方案

问题：后端收到的数据为空或格式错误

原因：未设置Content-Type: application/json，或前端传入的数据不是对象/字符串。
解决：检查请求头是否正确，data参数确保传入对象或JSON字符串。

问题：GET请求传JSON时URL过长

原因：JSON序列化后字符串过长，超过URL长度限制（一般2KB）。
解决：改用POST请求传JSON,或精简JSON数据。

问题：小程序开发者工具提示“request:fail url not in domain list”

原因：请求的域名未在“小程序后台-开发-开发管理-开发设置-服务器域名”中配置。
解决：登录小程序后台，配置合法的request合法域名（支持HTTPS）。

小程序中传递JSON数据的核心步骤可归纳为：

1. 明确请求方法：复杂JSON数据优先用POST，GET需序列化后作为Query参数；
2. 设置请求头：Content-Type必须为application/json；
3. 构造数据：直接传入JS对象（自动序列化）或手动`