如下將fetch寫成函數,返回值時會發現,控制台顯示我的數據Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]],這樣的方式要如何取得資料來應用呢?。

將提取api fetch寫成函式調用

function apiGetAll (api) {
    return fetch(api, {
        headers: { "content-type": "application/json" }
    })
        .then(response => response.json().then(json => ({ json, response })))
        .then(({ json, response }) => {
            if (!response.ok) {
                return Promise.reject(json);
            }

            return json;
        })
        .then(response => response, error => error);
}

我在這裡調用它,但是當我嘗試記錄變量'api'

componentDidMount () {
    console.log("Component did mount")
    const api = apiGetAll() 
}

這是我在fetch調用後記錄的響應,Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]它顯示了我的所有數據,但不知道如何取得使用它。

如何讀取fetch函數api數據來應用?

可使用下列兩種方式調用數據

then內的函數返回值

    apiGetAll("apiurl").then(res => this.setState({ data: res.data }));

Promise.resolve調用

    const a = Promise.resolve(apiGetAll("apiurl"));
    // Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "xx"}

    a.then(function(result) {
        console.log(result);
    });

您也可能喜歡這些文章

jQuery parent()應用層級元素的父親、阿公都來了

jQuery選取元素時,可以使用到parent(),選擇層級元素的上階層級,但往往需要在選取在上一階層,如父親的父親(阿公),如範例<li>的爸爸<ul>,<ul>的爸爸<nav>,要對<nav>做些事情時,要如何處理?...