如何在循环中有序执行Ajax请求获取Woocommerce分类？

是的，你遇到的问题完全是Ajax异步特性导致的。jQuery.get发起的是异步HTTP请求，循环会一次性触发所有4个请求，而服务器对每个请求的响应速度可能不同，哪个请求先返回，对应的done回调就会先执行，最终导致_cat_array里的分类顺序被打乱。

解决方案：使用async/await控制请求顺序 #

jQuery的get方法返回的Deferred对象支持thenable接口，可以直接和async/await配合，实现请求的顺序执行，这种方式直观易读：

// 定义异步函数处理分类获取
async function fetchAllCategories() {
    const _cat_array = [];
    // 总页数：330个分类，每页100，共4页（1-4）
    const totalPages = 4;

    for(let i = 0; i < totalPages; i++) {
        const currentPage = i + 1;
        try {
            // 等待当前页请求完成后，再执行下一次循环
            const response_cat = await jQuery.get(
                `${url}/wp-json/wc/v3/products/categories/?consumer_key=${ck}&consumer_secret=${cs}&per_page=100&page=${currentPage}`
            );
            
            console.log(`已获取第${currentPage}页分类`, response_cat);
            // 将当前页分类按顺序存入数组
            jQuery.each(response_cat, function(index, value) {
                _cat_array.push(`${value.id}:${value.name}`);
            });
            // 更新输入框值（也可以等所有请求完成后统一更新）
            jQuery('form.submit-new-product-data #form__categories').val(_cat_array);
        } catch (error) {
            console.error(`获取第${currentPage}页分类失败`, error);
            // 可根据需求处理错误：比如中断循环或继续请求后续页
        }
    }

    console.log('所有分类已按顺序获取完成', _cat_array);
}

// 调用函数开始获取
fetchAllCategories();

原理说明 #

• async标记函数为异步函数，内部可使用await关键字
• await会暂停当前函数执行，直到jQuery.get请求完成并返回结果，再继续执行下一次循环
• 这样就能保证请求严格按照第1页→第2页→第3页→第4页的顺序发起和处理，_cat_array里的分类顺序会和接口返回的完全一致

内容的提问来源于stack exchange，提问作者Web Design