javascript - 使用带有异步功能的 ajax 获取数据

Question

在第一个示例中，我使用ajaxusing获取数据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函数来保存和最小化我的代码，function 这就是我尝试的

示例 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());
};

但它log在console每一次

Promise {<pending>}

标签： javascriptajaxasync-await

Answer 1

要使用异步功能，您必须返回Promise

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

例子：

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

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

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());
};