使用带有异步功能的ajax获取数据[重复]答案

【问题标题】：Fetch data using ajax with async function [duplicate]使用带有异步功能的ajax获取数据[重复]
【发布时间】：2020-04-21 04:34:09
【问题描述】：

在第一个示例中，我使用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 函数在单个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>}

【问题讨论】：

您正在等待res 变量，它是一个空对象。
但我试图从这部分获得它的价值req.onload = () => { res = JSON.parse(req.responseText); };
或者更简单的说res().then(response => { console.log(response) }).catch(() => { alert("bad stuff"); })
@BRO_THOM 它打印空对象
我的错，我以为我看到你在第二个 sn-p 中使用 Fetch，但你仍在使用 XMLHttpRequest - 你需要将代码放在 req.onload 函数中, 因为onload是你的请求完成后执行的代码。

标签： javascript ajax async-await

【解决方案1】：

您正在等待res 变量，它是一个空对象。尝试等待承诺。示例：

await req
return res

如果这不起作用，请尝试.then()

【讨论】：

【解决方案2】：

要使用async 函数，您必须返回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());
};

【讨论】：

得到Promise {<pending>} :(
编辑到fetch 后得到Promise {<pending>} 到:(