如何让JS中的请求调用在后台运行以避免加载阻塞？

1. 立即触发请求但不等待完成 #

如果你当前在应用加载阶段用await getRegionList()或链式调用等待请求完成，会直接阻塞加载流程。改成无等待的异步调用即可：

// 替换原来的 await getRegionList() 或 getRegionList().then(...)
getRegionList().catch(err => console.error('加载地区列表失败:', err));

调用后应用会继续执行后续初始化逻辑，请求和存储在后台异步进行，完全不阻塞主线程。

2. 优化indexDB存储逻辑（核心优化，大幅压缩耗时） #

20秒的存储时间大概率是逐条写入导致的，改用批量事务存储能将耗时压缩到几秒内：

假设你当前的store.set是逐条存储，替换为批量插入逻辑：

// 封装批量存储函数
function batchSaveRegions(regionData) {
    return new Promise((resolve, reject) => {
        // 打开indexDB数据库（假设已存在名为regionDB的库，表为regions）
        const request = indexedDB.open('regionDB', 1);
        
        request.onsuccess = (event) => {
            const db = event.target.result;
            const transaction = db.transaction('regions', 'readwrite');
            const store = transaction.objectStore('regions');
            
            // 批量写入数据，put用于覆盖已有数据，add则不允许重复
            regionData.forEach(region => store.put(region));
            
            transaction.oncomplete = () => {
                db.close();
                resolve();
            };
            
            transaction.onerror = (err) => reject(err);
        };
        
        request.onerror = (err) => reject(err);
    });
}

修改getRegionList中的存储逻辑：

function getRegionList() {
    return new Promise(function(resolve, reject) {
        const config: ExtendedAxiosConfig = {
            method: "GET",
            url: "businesses/regions",
            _addToken: false,
        };
        axios(config)
            .then((res) => {
                resolve(true); // 立即resolve，不等待存储完成
                // 后台执行批量存储
                batchSaveRegions(res.data.data).catch(err => console.error('批量存储地区失败:', err));
            })
            .catch((err) => {
                reject(err);
            });
    });
}

批量事务利用indexDB的事务特性一次性提交所有写入，避免了多次IO开销，能极大缩短存储耗时。

3. 延迟请求触发时机 #

如果应用加载时主线程资源紧张，可以把请求延迟到核心资源加载完成后再触发：

原生JS场景： #

// 等DOM结构加载完成后请求
document.addEventListener('DOMContentLoaded', () => {
    getRegionList().catch(err => console.error('加载地区列表失败:', err));
});

// 或等页面所有资源（图片、样式等）加载完成
window.addEventListener('load', () => {
    getRegionList().catch(err => console.error('加载地区列表失败:', err));
});

Vue/React框架场景： #

在组件的mounted（Vue）或useEffect（React）钩子中调用，确保核心界面渲染完成后再后台加载数据：

// Vue示例
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
    getRegionList().catch(err => console.error('加载地区列表失败:', err));
});
</script>

// React示例
import { useEffect } from 'react';

function App() {
    useEffect(() => {
        getRegionList().catch(err => console.error('加载地区列表失败:', err));
    }, []);
    
    return <div>应用核心内容</div>;
}

4. 用Web Worker隔离存储逻辑（彻底解放主线程） #

如果优化存储后仍有主线程阻塞，可将存储逻辑放到Web Worker中，让存储操作在独立线程运行：

1. 创建region-store.worker.js文件：

self.onmessage = (e) => {
    const regionData = e.data;
    
    // 批量存储的indexDB逻辑
    const request = indexedDB.open('regionDB', 1);
    
    request.onsuccess = (event) => {
        const db = event.target.result;
        const transaction = db.transaction('regions', 'readwrite');
        const store = transaction.objectStore('regions');
        
        regionData.forEach(region => store.put(region));
        
        transaction.oncomplete = () => {
            db.close();
            self.postMessage({ status: 'success' });
        };
        
        transaction.onerror = (err) => {
            self.postMessage({ status: 'error', message: err.message });
        };
    };
    
    request.onerror = (err) => {
        self.postMessage({ status: 'error', message: err.message });
    };
};

2. 修改getRegionList：

function getRegionList() {
    return new Promise(function(resolve, reject) {
        const config: ExtendedAxiosConfig = {
            method: "GET",
            url: "businesses/regions",
            _addToken: false,
        };
        axios(config)
            .then((res) => {
                resolve(true); // 立即resolve，不等待存储
                // 创建Worker处理存储
                const storeWorker = new Worker('./region-store.worker.js');
                storeWorker.postMessage(res.data.data);
                
                // 监听Worker结果，仅做错误日志
                storeWorker.onmessage = (e) => {
                    if (e.data.status === 'error') {
                        console.error('Worker存储地区失败:', e.data.message);
                    }
                    storeWorker.terminate();
                };
                
                storeWorker.onerror = (err) => {
                    console.error('Worker运行错误:', err);
                    storeWorker.terminate();
                };
            })
            .catch((err) => {
                reject(err);
            });
    });
}

存储操作完全在后台线程执行，主线程不会有任何阻塞，应用加载和交互完全不受影响。

内容的提问来源于stack exchange，提问作者Martin AJ