如何在Ajax外部获取success回调函数的处理结果

问题核心原因 #

• 本质是异步请求时序问题：$.ajax默认是异步执行的，代码运行到$.ajax行时仅会发出请求，不会等待接口返回结果就会直接执行后续赋值逻辑，此时success回调还未触发，自然拿不到处理后的数据。
• 你将sendIN定义在success配置项内部，属于局部作用域函数，外部本来就无法直接访问调用。
• Cookie方案虽然可临时解决问题，但单条Cookie最大仅支持4KB存储，且所有Cookie会随每次HTTP请求发送给服务端，额外占用带宽，只适合存小体积的身份凭证类数据。

解决方案 #

方案1：回调函数处理（最简适配原有写法） #

把需要用到请求结果的后续逻辑封装成函数，在success回调数据处理完成后直接调用，同时可以用localStorage做持久化存储，单域名下默认有5MB容量，完全满足绝大多数数据存储需求：

let choiceContext = [];
let nameList = [];
const requestData = {
    resource_id: '9329755c-6406-4894-88b7-e7b04ccdfecc',
    limit: 10,
};

// 封装所有需要用到返回结果的逻辑
function handleResult(processedData) {
    const answer = processedData;
    // 这里写拿到数据后的后续操作，比如渲染页面、计算逻辑等
}

$.ajax({
    url: 'https://www.data.brisbane.qld.gov.au/data/api/3/action/datastore_search',
    data: requestData,
    dataType: 'jsonp',
    cache: true,
    success: function(data){
        $.each(data.result.records, function(recordKey, recordValue) {
            // 保留你原来处理数据写入choiceContext的逻辑
        });
        // 直接调用后续逻辑函数传值
        handleResult(choiceContext);
        // 如需持久化存储供其他页面/场景使用，写入localStorage
        localStorage.setItem('choiceContext', JSON.stringify(choiceContext));
    }
});

// 其他地方需要取存储的数据时调用即可，注意反序列化
// const savedAnswer = JSON.parse(localStorage.getItem('choiceContext'));

方案2：Promise封装（更灵活的异步写法） #

如果需要多处调用该请求，建议封装成Promise，可配合async/await写出更易维护的同步风格异步代码：

function getBrisbaneData() {
    return new Promise((resolve, reject) => {
        const requestData = {
            resource_id: '9329755c-6406-4894-88b7-e7b04ccdfecc',
            limit: 10,
        };
        $.ajax({
            url: 'https://www.data.brisbane.qld.gov.au/data/api/3/action/datastore_search',
            data: requestData,
            dataType: 'jsonp',
            cache: true,
            success: function(data){
                let choiceContext = [];
                $.each(data.result.records, function(recordKey, recordValue) {
                    // 保留你原来处理数据写入choiceContext的逻辑
                });
                resolve(choiceContext);
            },
            error: (err) => reject(err)
        })
    })
}

// 调用方式1：用.then获取结果
getBrisbaneData().then(answer => {
    // 这里使用拿到的answer做操作
})

// 调用方式2：用async/await写法更直观
async function main() {
    const answer = await getBrisbaneData();
    // 这里使用拿到的answer做操作
}
main();

超大容量存储备选 #

如果你的数据量超过5MB，可以使用浏览器内置的IndexedDB存储，支持大容量结构化数据存储，适配GB级数据存储需求。

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