uniappx 中封装uni.request请求JSON解析错误

Question

我本来想着封装一下请求，将post请求中的data用参数传递，传递过去之后请求报错，报错信息如下图所示。
代码如下图所示，如果我直接在页面中调用uni.request则没有问题，可以正常请求，但是需要将reactive解构到一个原始对象中。但是这个方法如果在封装请求里无效。我检查了他们俩的类型，都是UTSJSONObject，为什么在页面中就可以请求，单独封装一个文件就不行呢？
下列代码是uts代码，框架是uniappx

    const registerForm = reactive<RegisterForm>({  
        username: 'happyUser',  
        password: '234344',  
        nickname: '开心的用户',  
        age: '12',  
        gender: 0,  
        avatarUrl: '',    
    })  
    const register = ():void => {  
        // let obj = {...registerForm}  
        // uni.request({  
        //  url: 'http://192.168.27.58:8080/app/auth/register',  
        //  method: "POST",  
        //  data: obj,  
        //  success:(res) => {  
        //      console.log(res.data);  
        //  },  
        //  fail:(res) => {  
        //      console.log(res);  
        //  }  
        // })  
        let obj = {...registerForm}  
        console.log(obj);  
        userRegister(obj).then(res => {  
            console.log(res);  
        })  
    }

// 封装的请求  
export const userRegister = (data : UTSJSONObject ):Promise<ApiResponse> => {  

        // return post("/auth/register",data)  
        return new Promise<ApiResponse>((resolve,reject) => {  
            uni.request<ApiResponse>({  
                url: 'http://192.168.27.58:8080/app/auth/register',  
                method: "POST",  
                data,  
                success: (response) => {  
                    const jsonResult = response.data as ApiResponse  
                    if (jsonResult != null) {  
                        if (jsonResult.code != 200) {  
                            uni.showToast({ title: jsonResult.msg ?? "出错了", icon: 'none' })  
                        }  
                        resolve(jsonResult)  
                    } else {  
                        reject(new Error("响应数据为空"))  
                    }  
                },   
                fail: (err) => {  
                    console.error("POST 请求错误：", err)  
                    uni.showToast({ title: "请求失败: " + err.errMsg, icon: 'none' })  
                    reject(err)  
                }  
            })  
        })  
}

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题分析

你在uni-app中尝试封装uni.request请求，传递data参数时遇到问题。直接在页面中调用uni.request可以正常请求，但是在封装中报错。

解决方案

可能的原因是data参数类型不正确，导致JSON解析错误。尝试以下解决方案：

1. 检查data参数类型：确保data参数是对象类型（{}），而不是字符串或其他类型。
2. 使用JSON.stringify()：尝试使用JSON.stringify()方法将data对象转换为JSON字符串，然后传递给uni.request。
3. 检查请求头：确保请求头中没有设置Content-Type为application/json，这可能导致JSON解析错误。

核心代码

// 封装uni.request请求
function request(url: string, data: any, method: string = 'POST') {
  // 使用JSON.stringify()转换data对象
  const jsonData = JSON.stringify(data);
  uni.request({
    url,
    method,
    header: {
      'Content-Type': 'application/json'
    },
    data: jsonData
  });
}

注意：上述代码仅提供核心部分，具体实现可能需要根据你的需求进行调整。