uni.request()相关问题

合集 - 互联网，没有你我可怎么活(5)

1.uni.request()相关问题2023-05-19

2.TCP/IP协议为什么需要的是三次握手，而不是两次or四次？2023-05-263.axios之基本封装2023-12-264.发送 POST 请求时常见 Content-Type 的设置以及参数传递2024-01-265.关于 AJAX 请求跨域问题在 Vue 项目中的解决方式2024-02-04

收起

一、uni-app前端post请求数据json序列化

1. 前置须知

Content-Type 实体头部用于指示资源的 MIME（媒体） 类型 media type 。

• 在请求中 ，客户端告诉服务器实际发送的数据类型。
• 在响应中，Content-Type 标头告诉客户端实际返回的内容的内容类型。

2. uni.request({})

官方文档

2.0 基本封装

const baseUrl = 'http://localhost:8003'
 
export function request(url, params, method, header, complete) {
	return new Promise((resolve, reject) => {
		uni.request({
			url: `${baseURL}${url}`, 
			data: params,
			dataType: 'json', 
			method: method, 
			header: header,
			success: (res) => {
				if (res.statusCode === 200) {
					// 可在分业务逻辑 res.data.code
					resolve(res.data); // { code:1,data:{},msg:'成功' }
				} else {
					if (res.errMsg) {
						uni.showToast({
							title: res.errMsg,
							icon: 'none'
						});
					}
					reject(res)
					console.err(res)
				}
			},
			fail: (err) => {
				uni.showToast({
					title: '网络不稳定请重试！',
					icon: 'none'
				});
				reject(err)
				console.err(err)
			},
			complete: () => {
				complete();
			}
		});
	})
}
 
// 接口
export function getList (data,complete) {
    return request(`/api/xxx/xxx/${data.pageNumber}/${data.pageSize}`,data,'POST', {'content-type': 'application/json'}, complete)
}
 
// 调用
const params = {}
getList(params,()=>{}).then(
    res=> {
        this.xxxList = res.data
    }
)

2.1 data请求参数说明

对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。
对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化，默认。

这也就是为什么，前端设置请求体类型为json、后台@RequestBody JSONObject json接收参数，发送请求时参数是 Object 却不需要手动通过JSON.stringify(data)序列化，请求不会报错；dataType: 'json', //服务器返回json格式数据，如果设为 json（默认），会对返回的数据进行一次 JSON.parse，非 json 不会进行 JSON.parse。

2.2 success返回参数说明

“成功接收数据”进入success回调，res参数接收，res对象的结构：

参数	类型	说明
data	Object/String/ArrayBuffer	开发者服务器返回的数据
statusCode	Number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header
cookies	Array.<string>	开发者服务器返回的 cookies，格式为字符串数组

二、uni.request的success回调问题

参数	类型	说明
success	Function	收到开发者服务器成功返回的回调函数
fail	Function	接口调用失败的回调函数

此处的 success 是只要接收到服务器的返回就算成功，不管返回的 HTTP 状态码是不是2xx；
所以，正常使用这个 uni.request 的时候，需要手动地去根据返回的 HTTP 状态码(res.statusCode)，来判断是 resolve 还是 reject。