uni-app 接口返回fail导致整个程序崩溃
uni-app 接口返回fail导致整个程序崩溃
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | w11 | HBuilderX |
产品分类：uniapp/小程序/微信
示例代码：
submitOrder2() {
let vm = this;
this.saleOrderParams.productIds = [];
this.saleOrderParams.specs = [];
this.saleOrderParams.textures = [];
this.saleOrderParams.colors = [];
this.saleOrderParams.directions = [];
this.saleOrderParams.markPrices = [];
this.saleOrderParams.sellPrices = [];
this.saleOrderParams.sellCounts = [];
this.saleOrderParams.pcss = [];
this.saleOrderParams.userIds = [];
this.saleOrderParams.dess = [];
this.saleOrderParams.sendTimes = [];
this.saleOrderParams.specialeds = [];
this.saleOrderParams.notes = [];
if (this.fromProductList.length == 0) {
uni.showToast({
title: "请选择产品",
icon: "none",
mask: true,
});
return;
}
if (this.fromDealer.dealerName == "") {
uni.showToast({
title: "请选择客户",
icon: "none",
mask: true,
});
return;
}
if (this.saleOrderParams.settleMoney > this.totalPrice) {
uni.showToast({
title: "定金不能大于订单总售价",
icon: "none",
mask: true,
});
return;
}
if (this.saleOrderParams.settleMoney) {
if (!this.typeName) {
uni.showToast({
title: "有定金请选择结款方式",
icon: "none",
mask: true,
});
return;
}
}
//合并提交参数
for (const val of this.fromProductList) {
this.saleOrderParams.productIds.push(val.productId);
this.saleOrderParams.specs.push(val.spec);
this.saleOrderParams.textures.push(val.texture);
this.saleOrderParams.colors.push(val.color);
this.saleOrderParams.directions.push(val.direction);
this.saleOrderParams.markPrices.push(val.markPrice);
this.saleOrderParams.sellPrices.push(val.sellPrice);
this.saleOrderParams.sellCounts.push(val.sellCount);
this.saleOrderParams.pcss.push(val.pcs);
this.saleOrderParams.sendTimes.push(val.sendTime);
this.saleOrderParams.dess.push(val.description);
this.saleOrderParams.notes.push(val.note);
this.saleOrderParams.specialeds.push(val.config.specialed);
}
this.saleOrderParams["saleOrder.province"] = this.fromDealer.province;
this.saleOrderParams["saleOrder.discountPrice"] =
this.saleOrderParams.discountPrice;
this.saleOrderParams["saleOrder.city"] = this.fromDealer.city;
this.saleOrderParams["saleOrder.county"] = this.fromDealer.county;
this.saleOrderParams["saleOrder.buyerName"] = this.fromDealer.buyerName;
this.saleOrderParams["saleOrder.buyerPhone"] = this.fromDealer.buyerPhone;
this.saleOrderParams["saleOrder.address"] = this.fromDealer.address;
this.saleOrderParams["saleOrder.consignee"] = this.fromDealer.consignee;
this.saleOrderParams["saleOrder.consigneePhone"] =
this.fromDealer.consigneePhone;
this.saleOrderParams["saleOrder.consigneeAddr"] =
this.fromDealer.consigneeAddr;
this.saleOrderParams["saleOrder.bookSettleType"] =
this.saleOrderParams.payType;
this.saleOrderParams["saleOrder.logisticsName"] =
this.fromDealer.logisticsName;
this.saleOrderParams["saleOrder.logisticsPhone"] =
this.fromDealer.logisticsPhone;
this.saleOrderParams["saleOrder.logisticsAddr"] =
this.fromDealer.logisticsAddr;
this.saleOrderParams["saleOrder.description"] =
this.saleOrderParams.description;
this.saleOrderParams["saleOrder.dealer.dealerId"] =
this.fromDealer.dealerId;
this.saleOrderParams["saleOrder.orderId"] = this.orderId;
this.saleOrderParams["version"] = this.version;
let params = qs.stringify(this.saleOrderParams, {
arrayFormat: "repeat",
});
vm.$postGet({
url: "sgl/saleOrder_edit.html",
data: params,
success: function (res) {
if (res.info == "success") {
uni.showToast({
title: res.msg,
mask: true,
});
uni.redirectTo({
url:
"/pages/saleOrder/saleOrder_info/saleOrder_info" +
`?orderId=${res.saleOrder.orderId}`,
});
// vm.fromProductList = [];
// vm.fromDealer = {};
uni.$emit("refreshs");
}
},
});
}
2 回复
在 uni-app 中，如果接口返回 fail，可能会导致程序崩溃，这通常是因为没有正确处理错误或异常情况。为了避免这种情况，你可以采取以下措施：
1. 使用 try-catch 捕获异常
在调用接口时，使用 try-catch 语句来捕获可能的异常，防止程序崩溃。
try {
const res = await uni.request({
url: 'https://example.com/api',
method: 'GET'
});
if (res.statusCode === 200) {
console.log('请求成功', res.data);
} else {
console.error('请求失败', res);
}
} catch (error) {
console.error('请求异常', error);
}2. 检查接口返回状态
在接口返回后，检查返回的状态码或错误信息，确保正确处理 fail 情况。
uni.request({
url: 'https://example.com/api',
method: 'GET',
success: (res) => {
if (res.statusCode === 200) {
console.log('请求成功', res.data);
} else {
console.error('请求失败', res);
}
},
fail: (err) => {
console.error('请求失败', err);
}
});3. 使用 Promise 封装请求
将 uni.request 封装成 Promise，方便使用 async/await 进行异步处理，并统一处理错误。
function request(options) {
return new Promise((resolve, reject) => {
uni.request({
...options,
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject(res);
}
},
fail: (err) => {
reject(err);
}
});
});
}
async function fetchData() {
try {
const data = await request({
url: 'https://example.com/api',
method: 'GET'
});
console.log('请求成功', data);
} catch (error) {
console.error('请求失败', error);
}
}
fetchData();4. 全局错误处理
在 uni-app 中，你可以使用 uni.onError 来捕获全局的未捕获异常，防止程序崩溃。
uni.onError((error) => {
console.error('全局捕获的异常', error);
});5. 使用 uni.showToast 提示用户
在接口请求失败时，使用 uni.showToast 提示用户，避免用户感到困惑。
uni.request({
url: 'https://example.com/api',
method: 'GET',
success: (res) => {
if (res.statusCode === 200) {
console.log('请求成功', res.data);
} else {
uni.showToast({
title: '请求失败',
icon: 'none'
});
}
},
fail: (err) => {
uni.showToast({
title: '请求异常',
icon: 'none'
});
}
});6. 使用 uni.showModal 提供更多信息
在接口请求失败时，使用 uni.showModal 提供更多错误信息，并允许用户进行重试或其他操作。
uni.request({
url: 'https://example.com/api',
method: 'GET',
success: (res) => {
if (res.statusCode === 200) {
console.log('请求成功', res.data);
} else {
uni.showModal({
title: '请求失败',
content: '请检查网络连接或稍后重试',
showCancel: false
});
}
},
fail: (err) => {
uni.showModal({
title: '请求异常',
content: '请检查网络连接或稍后重试',
showCancel: false
});
}
});