web-dev-qa-db-ja.com

フェッチ付きのプロミスコールバックからリターンを返す方法は？

私は少し困惑しています。これを行う方法を忘れました。 urlのパラメーターを受け取るext.get（）という関数があります。 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())

        });

    };
javascriptecmascript-6fetch-api
8
Blaze349

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
});
_
8
Jaromanda X

非同期APIであるfetchを使用しています。つまり、関数も非同期である必要があります。つまり、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");
2
lonesomeday