如下將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);
    });

您也可能喜歡這些文章

使用fullPage.js設計單頁式選單滑動區塊的全屏滾動網站

Demo | 官網 經常能見到單頁式使用選單滑動區塊的網站,我們稱為全屏滾動網站(也稱為單頁網站),尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景,再添加一些簡單的內容,顯得格外的高端大氣上檔次。比如iPhone 5C的介紹頁面(查看)。如果你也希望你的網站能設計成全屏的,顯得更上檔次,你可以試試fullPage.js。