Javascript 使用带有异步函数的ajax获取数据

在第一个示例中，我使用

ajax

使用

XMLHttpRequest

获取数据，它工作正常

示例1

let req = new XMLHttpRequest();
req.open(
    "GET",
    "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json"
);

let res = {};
req.onload = () => {
    res = JSON.parse(req.responseText);
};

req.send();

window.onload = _ => {
    console.log(res);
};

但是我想使用

async

函数在单个

函数中保存并最小化代码
这就是我所尝试的

示例2


async function res() {
    let req = new XMLHttpRequest();
    req.open(
        "GET",
        "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json"
    );

    let res = {};
    req.onload = () => {
        res = JSON.parse(req.responseText);
    };

    req.send();
    return await res;
}

window.onload = _ => {
    console.log(res());
};

但它每次都会在
控制台中
记录

Promise {<pending>}

Promise{}
您正在等待
res
变量，它是一个空对象。试着等待承诺。
例如：

await req
return res

如果不起作用，请尝试
。然后（）

您也可以使用该函数，它是获取数据的更现代的方法

例如：

await req
return res

const httpRequest = async () => {
    try {
        const response = await fetch('http://example.com/movies.json');
        return await response.json();
    } catch(e) {
        console.err(e);
    }
}

要解决您的问题，请尝试使用so：

function request() {
    return new Promise((resolve, reject) => {
        let req = new XMLHttpRequest();

        req.open(
            "GET",
            "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json"
        );

        req.onload = () => {
            resolve(JSON.parse(req.responseText));
        };

        req.send();
    })
}

function res() {
    request().then(data => console.log(data));
}

window.onload = _ => {
    console.log(res());
};

您正在等待
res
变量，它是一个空对象。但我试图从这部分
req.onload=（）=>{res=JSON.parse（req.responseText）；}或者更简单地说是
res（）。然后（response=>{console.log（response）}）.catch（（）=>{alert（“bad stuff”）；}）
@BRO THOM it print empty object my bad，我想我看到你在第二个代码片段中使用
Fetch
，但是您仍然在使用
XMLHttpRequest
-您需要将代码放在
req.onload
函数中，因为
onload
是在您的请求完成后执行的代码。它获取
Promise{}
：（编辑到
fetch
之后获取
Promise{}
：(