Await fetch 返回承诺，而不是数据

Question

我正在从电子表格中获取和处理数据，如下所示：

const getJsonSheet = async () => {
    const response = await fetch('<FETCH-SPECIFIC-SPREADSHEET-LINK>');
    const data = await response.json();
    let cells = await data.feed.entry;
    let table = {
        massa:[],
        description:[],
        price:[],
        imgLink:[]
    };
    await cells.map( cell => {
        if ( parseInt(cell.gs$cell.row) > 1) {
            let rowValue = parseInt(cell.gs$cell.row) - 2;
            let inputValue = cell.gs$cell.inputValue;

            switch (cell.gs$cell.col) {
                case "1":
                    table.massa[rowValue] = inputValue;
                    break;
                case "2":
                    table.description[rowValue] = inputValue;
                    break;
                case "3":
                    table.price[rowValue] = inputValue;
                    break;
                case "4":
                    table.imgLink[rowValue] = inputValue;
                    break;
                default:
                    console.log('Cell out of range.')
                }
        }        
    })

    return table;
};

export default getJsonSheet;

我在另一个文件中导入并执行 getJsonSheet()，将其值分配给一个变量，然后我 console.log 该变量。我希望将表对象记录到控制台，但实际上记录了一个 Promise。然而，这个记录的承诺已完成，并具有“表”对象作为其结果。我还没有完全理解 Promise、async 和 wait - 我对这个特定主题很陌生。

有没有办法将“表”对象直接分配给变量，以便我可以在其他地方使用它来操作 DOM？

PS：数据正在正确获取，因为我想要的只是承诺的结果。我的问题是如何将承诺的结果分配给变量。

Answer 1

看下面的例子：

async function f3() {
  const y = await 20;
  return 5;
}

console.log(f3());

打印：

Promise {<pending>}

但是这个：

async function f3() {
  const y = await 20;
  return 5;
}

console.log(await f3());

打印：

5

如果您希望返回

console.log

，您的

5

需要位于执行堆栈顶层或另一个异步函数中，如下所示：

async function f3() {
  const y = await 20;
  return 5;
}

async function f_another() {
  return await f3();
}

Answer 2

由于异步函数将以异步方式运行，因此您将始终获得同步结果（Promise obj）。正确的用法是：

async function test()
{
    return 'hello async';
}
//call it
test().then(res){console.log(res)}

Answer 3

你就快到了。如果您想这样做，那么我会将等待的代码包装在

try/catch

块中以正确处理异常。

const getJsonSheet = async () => {
    let cells
    try {
        const response = await fetch('<FETCH-SPECIFIC-SPREADSHEET-LINK>');
        const data = await response.json();
        cells = data.feed.entry;
    } catch(err) {
        cells = []
    }
    let table = {
        massa:[],
        description:[],
        price:[],
        imgLink:[]
    };
    cells.forEach( cell => {
        if ( parseInt(cell.gs$cell.row) > 1) {
            let rowValue = parseInt(cell.gs$cell.row) - 2;
            let inputValue = cell.gs$cell.inputValue;

            switch (cell.gs$cell.col) {
                case "1":
                    table.massa[rowValue] = inputValue;
                    break;
                case "2":
                    table.description[rowValue] = inputValue;
                    break;
                case "3":
                    table.price[rowValue] = inputValue;
                    break;
                case "4":
                    table.imgLink[rowValue] = inputValue;
                    break;
                default:
                    console.log('Cell out of range.')
                }
        }        
    })

    return table;
};

export default getJsonSheet;

调用将是：

import getJsonSheet from './getJsonSheet'
const table = await getJsonSheet()

或者，您可以完全避免等待，让承诺自然实现，如下所示：

const getJsonSheet = (callback) => {
    const response = fetch('<FETCH-SPECIFIC-SPREADSHEET-LINK>')
                      .then(response => response.json()
                      .then(body => {
    let cells = body.feed.entry;
    let table = {
        massa:[],
        description:[],
        price:[],
        imgLink:[]
    };
    cells.forEach( cell => {
        if ( parseInt(cell.gs$cell.row) > 1) {
            let rowValue = parseInt(cell.gs$cell.row) - 2;
            let inputValue = cell.gs$cell.inputValue;

            switch (cell.gs$cell.col) {
                case "1":
                    table.massa[rowValue] = inputValue;
                    break;
                case "2":
                    table.description[rowValue] = inputValue;
                    break;
                case "3":
                    table.price[rowValue] = inputValue;
                    break;
                case "4":
                    table.imgLink[rowValue] = inputValue;
                    break;
                default:
                    console.log('Cell out of range.')
                }
        }        
    })

    callback(table);
})
};

export default getJsonSheet;

调用将是：

import getJsonSheet from './getJsonSheet'
getJsonSheet((table) => setState(table))

有很多组合，选择哪一种取决于您的用例。