随着移动互联网的发展，移动应用程序的市场需求越来越大，针对该需求，诸如React Native和Flutter等各种跨平台框架应运而生。其中Uniapp是一款可用于开发跨平台应用程序的框架，它能够快速地构建多种平台，如Android、iOS、Web、微信小程序和支付宝小程序等。
在Uniapp中，发送请求并处理请求结果是一个核心的功能，本文将详细介绍Uniapp中的请求和处理结果的相关知识。
1.请求的发送
Uniapp中发送请求的方式有多种，最常见的方式是使用uni.request方法。
uni.request({
url: 'http://www.example.com',
data: {
name: 'example'
},
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res.data)
}
});该代码中，uni.request是发送请求的方法，需要传入一个包含url、data、header、success等参数的对象，其中url表示请求地址，data表示请求的数据，header表示请求头，success表示请求成功后的回调函数。在请求过程中，还可以传入fail和complete参数，分别表示请求失败和请求结束后的回调函数。
另一种发送请求的方式是使用封装好的uni.request方法，并将其封装到单独的JS文件中。
//request.js
import { getBaseUrl } from './config';
const req = (url, method, data) => {
return new Promise((resolve, reject) => {
uni.request({
url: getBaseUrl() + url,
method,
data,
header: {
'content-type': 'application/json'
},
success: (res) => {
resolve(res)
},
fail: (err) => {
reject(err);
}
});
});
}
export const post = (url, data) => {
return req(url, 'POST', data);
}
export const get = (url, data) => {
return req(url, 'GET', data);
}该代码中，封装了一个req方法，传入url、method、data三个参数，返回一个Promise对象，通过Promise对象实现异步操作，将请求成功和请求失败的结果传递给resolve和reject方法。同时，还封装了get和post方法，分别表示发送get和post请求，使用方式如下：
import { get, post } from './request';
get('/user', {id: 1}).then(res => {
console.log(res.data);
});
post('/login', {username: 'example', password: 'example'}).then(res => {
console.log(res.data);
});2.请求结果的处理
Uniapp中的请求结果一般是一个JSON对象，如下所示：
{
"code": 200,
"message": "success",
"data": {
"username": "example",
"age": 18
}
}其中，code表示状态码，message表示消息，data表示请求结果数据。
在处理请求结果时，首先需要根据code判断请求是否成功，并根据不同状态码作出相应处理。可以在请求方法的success回调函数中进行处理，也可以在封装的方法中进行处理。
import { get } from './request';
get('/user', {id: 1}).then(res => {
if(res.code === 200) {
console.log(res.data);
} else if(res.code === 401) {
console.log('用户未登录');
} else if(res.code === 404) {
console.log('用户不存在');
} else {
console.log('请求失败');
}
});另一种处理请求结果的方式是使用拦截器。拦截器是一个函数，可以在请求发出前或请求响应后对请求做一些处理，比如添加token、过滤数据等等。在Uniapp中使用拦截器的方法是通过封装一个request拦截器和response拦截器，分别处理请求前和请求后的逻辑。
//request.js
import { getBaseUrl } from './config';
const requestInterceptors = (config) => {
//添加token或其他逻辑
return config;
}
const responseInterceptors = (response) => {
const res = response.data;
if(res.code === 200) {
return res.data;
} else {
//根据code进行错误处理
uni.showToast({
title: res.message,
icon: 'none'
});
return Promise.reject(res);
}
}
const request = (options) => {
const { url, method = 'GET', data } = options;
const config = {
url: getBaseUrl() + url,
method,
data,
header: {
'content-type': 'application/json'
}
}
return new Promise((resolve, reject) => {
uni.request({
...requestInterceptors(config),
success: (response) => {
if(response.statusCode == 200) {
resolve(responseInterceptors(response));
} else {
reject(response)
}
},
fail: (error) => {
reject(error);
}
});
})
}
export default request;
//config.js
export const getBaseUrl = () => {
//返回请求地址
return 'http://www.example.com';
}该代码中，封装了requestInterceptors、responseInterceptors和request方法，并将请求拦截器和响应拦截器封装其中。其中requestInterceptors和responseInterceptors的作用分别是在请求前和请求后对请求进行处理。request方法则是发送请求的方法，使用方式如下：
import request from './request';
request({
url: '/user',
method: 'get',
data: {id: 1}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});最终成品代码是经过优化后的代码：
//config.js
export const getBaseUrl = () => {
//返回请求地址
return 'http://www.example.com';
}
//request.js
import { getBaseUrl } from './config';
const requestInterceptors = (config) => {
//添加token或其他逻辑
return config;
}
const responseInterceptors = (response) => {
const res = response.data;
if(res.code === 200) {
return res.data;
} else {
//根据code进行错误处理
uni.showToast({
title: res.message,
icon: 'none'
});
return Promise.reject(res);
}
}
const request = (options) => {
const { url, method = 'GET', data } = options;
const config = {
url: getBaseUrl() + url,
method,
data,
header: {
'content-type': 'application/json'
}
}
return new Promise((resolve, reject) => {
uni.request({
...requestInterceptors(config),
success: (response) => {
if(response.statusCode == 200) {
resolve(responseInterceptors(response));
} else {
reject(response)
}
},
fail: (error) => {
reject(error);
}
});
})
}
export default request;
//api.js
import request from './request';
export const getUser = (id) => {
return request({
url: '/user',
method: 'get',
data: {id}
});
}
//页面中使用
import { getUser } from './api';
getUser(1).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});本文介绍了Uniapp中请求和处理结果的相关知识，包括发送请求和处理请求结果的不同方式，以及使用拦截器进行请求的前置和后置处理。对于使用Uniapp进行跨平台应用程序开发的开发人员来说，掌握这些知识将有助于提高开发效率和代码质量，提高应用程序的稳定性和用户体验。
以上就是详细介绍Uniapp中的请求和处理结果的相关知识的详细内容，转载自php中文网
发表评论 取消回复