如何使用 fetch 从 Promise 回调中返回返回值？ [复制]答案

【问题标题】：How to return return from a promise callback with fetch? [duplicate]如何使用 fetch 从 Promise 回调中返回返回值？ [复制]
【发布时间】：2017-09-05 08:11:05
【问题描述】：

我有点难过。我忘记了如何做到这一点。我有一个名为 ext.get() 的函数，它接受一个 url 参数。它从 url 获取响应。 ext.get() 函数旨在将响应作为 json 返回。我不认为它正在这样做。

ext.get = (url) => {
        let myHeaders = new Headers();

        let options = {
            method: 'GET',
            headers: myHeaders,
            mode: 'cors'
        };

        //fetch get

        fetch(url, options).then(response => {
            console.log(JSON.stringify(response.json()))
            return JSON.stringify(response.json())

        });

    };

【问题讨论】：

return fetch(…
具体this answer
注意：ext.get 除了 Promise 之外不能返回任何东西——如果你想让它工作的话

标签： javascript ecmascript-6 fetch-api

【解决方案1】：

如果您需要 JSON 格式的响应 - 并认为 response.json() 与 response.text().then(txt => JSON.parse(txt)) 有效地相同

    return fetch(url, options).then(response => response.text());

所以，完整的功能是

ext.get = (url) => {
    let myHeaders = new Headers();
    let options = {
        method: 'GET',
        headers: myHeaders,
        mode: 'cors'
    };
    return fetch(url, options).then(response => response.text());
};

那样你实际上并没有在做JSON.stringify(JSON.parse(json)) ...这只是json

但是，我怀疑你想要一个普通的 ol' javascript 对象

ext.get = (url) => {
    let myHeaders = new Headers();
    let options = {
        method: 'GET',
        headers: myHeaders,
        mode: 'cors'
    };
    return fetch(url, options).then(response => response.json());
};

然后您将其用作：

ext.get('url').then(result => {
    // result is the parsed JSON - i.e. a plan ol' javascript object
});

【讨论】：

【解决方案2】：

您正在使用fetch，这是一个异步 API。这意味着你的函数也必须是异步的——即它必须返回一个Promise。（你可以通过回调来做到这一点，但这是 2017 年......）

您不能从该函数返回 JSON，因为该函数将在服务器的响应可用之前返回。您必须返回一个 Promise 并在调用代码中使用 then（或 await）处理它。

这里最简单和最好的方法是在转换后返回fetch 调用的结果。您不想解析 JSON，而是将其作为字符串返回。这需要response.text() 调用：

ext.get = (url) => {
    let myHeaders = new Headers();

    let options = {
        method: 'GET',
        headers: myHeaders,
        mode: 'cors'
    };

    //fetch get

    return fetch(url, options).then(response => response.text());
};

还有你的调用代码：

ext.get('http://example.com').then((response) => {
    console.log(response); // or whatever
});

或await:

let response = await ext.get("http://example.com");

【讨论】：