为什么封装XMLHttpRequest的函数未返回true反而返回undefined？

• 你代码里的return语句属于onreadystatechange回调函数的返回值，并不是外层generateJson函数的返回值，generateJson本身没有定义返回值，所以默认返回undefined
• XMLHttpRequest发起的是异步请求，调用xhr.send()后函数不会等待请求返回就会直接执行结束，等请求完成触发回调的时候，外层generateJson早就执行完毕了

方案1：用回调函数处理异步结果 #

把结果处理逻辑封装成回调函数传入，请求完成时调用回调回传结果：

const generateJson = (callback) => {
    var url = "https://api.insee.fr/entreprises/sirene/V3/siret/32773318400516";
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.setRequestHeader("Accept", "application/json");
    xhr.setRequestHeader("Authorization", "Bearer 54cb0781-a0ea-3d5b-9e81-f18ac252dfa4");
    xhr.onreadystatechange = () => {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            console.log(xhr.status);
            console.log(xhr.response);
            callback(true, xhr.response); // 请求完成调用回调，传入状态和响应数据
        }
    }
    xhr.onerror = () => {
        callback(false, xhr.error); // 请求出错调用回调
    }
    xhr.send();
}
// 调用的时候传入回调函数处理结果
generateJson((status, data) => {
    console.log('请求状态', status);
    console.log('返回数据', data);
})

方案2：封装成Promise（更推荐，支持async/await语法） #

把异步请求封装成Promise实例，更方便链式调用和同步写法：

const generateJson = () => {
    return new Promise((resolve, reject) => {
        var url = "https://api.insee.fr/entreprises/sirene/V3/siret/32773318400516";
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.setRequestHeader("Accept", "application/json");
        xhr.setRequestHeader("Authorization", "Bearer 54cb0781-a0ea-3d5b-9e81-f18ac252dfa4");
        xhr.onreadystatechange = () => {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    resolve({status: true, data: xhr.response});
                } else {
                    reject({status: false, error: xhr.statusText});
                }
            }
        }
        xhr.onerror = () => {
            reject({status: false, error: xhr.error});
        }
        xhr.send();
    })
}

// 调用方式1：用then/catch
generateJson().then(res => {
    console.log('请求成功', res);
}).catch(err => {
    console.log('请求失败', err);
})

// 调用方式2：在async函数中用await
async function test() {
    try {
        const res = await generateJson();
        console.log('请求结果', res);
    } catch (err) {
        console.log('请求错误', err);
    }
}
test();

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