当前位置：首页 > wzjs >正文

罗源福州网站建设全球购物官方网站有哪些

wzjs 2025/9/21 1:28:11

罗源福州网站建设,全球购物官方网站有哪些,网页设计网站免登陆,地方建立网站做SEM一、请求失败会弹出一个toast , 如何保证批量请求失败 , 只弹出一个toast 方法一：使用全局标志位 JavaScript let isToastShown false; // 全局标志位function makeRequests() {const requests [fetchPost(),fetchComments()]; // 多个请求Promise.all(reque…

一、请求失败会弹出一个toast , 如何保证批量请求失败 , 只弹出一个toast

方法一：使用全局标志位

JavaScript

let isToastShown = false; // 全局标志位function makeRequests() {const requests = [fetchPost(),fetchComments()]; // 多个请求Promise.all(requests).then(() => {// 所有请求成功的处理逻辑}).catch(errors => {if (!isToastShown) {// 检查标志位notify(errors[0]); // 弹出 toastisToastShown = true; // 设置标志位为 true}});
}function fetchJSON(url, input) {return fetch(url, input).then(res => {if (res.ok) {return res.json();}const err = new HttpError(res);if (!isToastShown) { // 检查标志位notify(err); // 弹出 toastisToastShown = true; // 设置标志位为 true}throw err; // 确保错误被抛出，否则后续逻辑可能无法捕获});
}// 示例错误类
class HttpError extends Error {constructor(response) {super(`${response.status} ${response.statusText}`);this.name = "HttpError";this.response = response;}
}// 重置标志位（在新的请求开始前）
makeRequests().finally(() => {isToastShown = false; // 确保在下一次请求时标志位被重置
});

方法二：使用防抖函数

JavaScript

// 防抖函数
function debounce(fn, delay = 1000) {let timeout;return function (...args) {clearTimeout(timeout);timeout = setTimeout(() => {fn.apply(this, args);}, delay);};
}const notifyDebounced = debounce(message => {notify(message);
}, 3000); // 3 秒内只执行一次// 示例调用
fetchJSON(url, input).catch(err => {notifyDebounced(err); // 使用防抖后的通知函数});

方法三：集中处理错误

JavaScript

function makeRequests() {const requests = [fetchPost(),fetchComments()]; // 多个请求Promise.allSettled(requests).then(results => {const hasError = results.some(result => result.status === "rejected");if (hasError) {const firstError = results.find(result => result.status === "rejected").reason;notify(firstError); // 合并所有错误并只弹出一次} else {// 所有请求成功的处理逻辑}});
}

二、减少项目中的 `if-else` 语句

1. 策略模式

JavaScript

// 定义策略对象
const strategies = {condition1: (arg) => {// 处理条件 1 的逻辑console.log(`Handling condition1 with argument: ${arg}`);},condition2: (arg) => {// 处理条件 2 的逻辑console.log(`Handling condition2 with argument: ${arg}`);},// 更多条件和处理逻辑
};// 动态获取条件并执行策略
function handleCondition(condition, arg) {const strategy = strategies[condition];if (strategy) {strategy(arg);} else {console.log(`Unknown condition: ${condition}`);}
}// 示例调用
handleCondition("condition1", "foo"); // 输出：Handling condition1 with argument: foo
handleCondition("condition3", "bar"); // 输出：Unknown condition: condition3

2. 表驱动法（动态条件）

JavaScript

const handlers = {"condition1": (arg) => console.log(`Handling condition1 with ${arg}`),"condition2": (arg) => console.log(`Handling condition2 with ${arg}`),// 其他条件处理函数
};function processConditions(conditions, arg) {conditions.forEach(condition => {const handler = handlers[condition];handler && handler(arg);});
}// 示例调用
processConditions(["condition1", "condition2"], "data"); // 输出两个条件的处理结果

3. 提取函数

JavaScript

function handleCaseA() {// 大量逻辑 A
}function handleCaseB() {// 大量逻辑 B
}function main() {const type = getType();if (type === "A") {handleCaseA();} else if (type === "B") {handleCaseB();} else {console.log("Unknown type");}
}

4. 状态模式

JavaScript

// 定义状态类
class State {handle(context) {console.log("Default state handling");}
}class StateA extends State {handle(context) {console.log("Handling State A");context.state = new StateB(); // 转换状态}
}class StateB extends State {handle(context) {console.log("Handling State B");context.state = new StateA();}
}// 上下文对象
class Context {constructor() {this.state = new StateA();}request() {this.state.handle(this);}
}// 示例调用
const context = new Context();
context.request(); // 输出：Handling State A
context.request(); // 输出：Handling State B