Redis vs Elasticsearch:核心区别深度解析
代码的余温:
谢谢认可,已互关~
Vue多请求并行处理实战指南
代码的余温:
3、结合Promise.all的安全用法
[code=javascript]
const makeRequest = (url) => {
return service.get(url).catch(err => {
console.error(`请求${url}最终失败`, err);
return null; // 返回null避免中断Promise.all
});
};
Promise.all([makeRequest('/api/1'), makeRequest('/api/2')])
.then(results => {
// results包含成功响应和null值
});
[/code]
Vue多请求并行处理实战指南
代码的余温:
2、增强型重试机制实现
[code=javascript]
import axios from 'axios';
const service = axios.create({
timeout: 5000,
retryTimes: 3, // 最大重试次数
retryDelay: 1000 // 重试间隔
});
service.interceptors.response.use(
response => response,
error => {
const config = error.config;
// 无重试配置或达到上限时拒绝
if (!config.retryTimes || config._retryCount >= config.retryTimes) {
return Promise.reject(error);
}
// 初始化重试计数器
config._retryCount = (config._retryCount || 0) + 1;
// 仅对特定错误重试(超时/5xx错误)
if (error.code === 'ECONNABORTED' ||
[500, 502, 503, 504].includes(error.response?.status)) {
return new Promise(resolve =>
setTimeout(() => resolve(service(config)), config.retryDelay)
);
}
return Promise.reject(error);
}
);
[/code]
Vue多请求并行处理实战指南
代码的余温:
1、基础并发请求结构
[code=javascript]
const request1 = axios.get('/api/data1');
const request2 = axios.get('/api/data2');
Promise.all([request1, request2])
.then(/* 处理结果 */)
.catch(/* 错误处理 */);
[/code]
CSS自适应布局实战指南
代码的余温:
[code=html]
.card {
background: white;
border-radius: 8px;
padding: var(--spacing-unit);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 媒体查询断点 */
@media (max-width: 768px) {
:root {
font-size: 14px;
}
.container {
flex-direction: column;
}
}
@media (max-width: 480px) {
.grid-container {
grid-template-columns: 1fr;
}
}