异步等待返回未定义 javascript

Question

这是我第一次使用 async/await

我调用了几个 api 方法并尝试将数据从响应体注入到 html-DOM
如您所见，我添加了一些异步等待，因为我使用 catch 调用了其他 function
这真的很好（我可以从console.log看到）
但是当我尝试将结果插入 html 时，它返回“未定义”
我已经做了一些返回新 Promise 的提示，但没有任何帮助

async function getProduct(productId) {
    var productTitle = '';
    return fetch('http://193.176.79.173/api/products/' + productId, {
            method: 'GET'
        })
        .then((response) => response.json())
        .then(function(data) {
            return data['data']['title'];
        })
}

async function getProducts(orderId) {
    fetch('http://193.176.79.173/api/orders/20210524155243107', {
            method: 'GET'
        })
        .then((response) => response.json())
        .then(async function(data) {
            var productsText = '';
            console.log(data);
            for (var i = 0; i < data['orderProducts'].length; i++) {
                var product = await getProduct(data['orderProducts'][i].product_id);
                console.log(product);
                productsText += '<div class="mdl-card__title">' +
                    '<h2 class="mdl-card__title-text">' + await getProduct(data['orderProducts'][i].product_id) +
                    '/h2>';
                console.log(productsText);
            }
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(productsText);
                }, 1000);
            });

        })
}

var myList = document.querySelector('#list');
async function drawTable() {
    fetch('http://193.176.79.173/api/paidOrders/')
        .then((response) => response.json())
        .then(async function(data) {
            var products = '';
            for (var i = 0; i < data.data.length; i++) {
                var listItem = document.createElement('div');
                var orderId = data.data[i].id;
                orderIdNew = orderId.toString();
                var lastChar = orderIdNew.substr(orderIdNew.length - 1);
                lastChar = parseInt(lastChar, 10) - 1;
                var orderIdNewNew = orderIdNew.replace(/.$/, lastChar);
                listItem.id = orderIdNewNew;
                products = await getProducts(orderIdNewNew);
                listItem.classList.add("mdl-card", "mdl-shadow--2dp", "mdl-cell", "mdl-cell--4-col");
                listItem.innerHTML = '<div style="padding: 16px"> Заказ № ' + orderIdNewNew +
                    '<div class="flex"><b>Статус:</b> ' + data.data[i].status + '</div>' +
                    '<div class="flex"><b>Сумма:</b> ' + data.data[i].summ + '</div>' +
                    '<b>Состав заказа:</b> </div>' +
                    products +
                    '</div>'
                myList.appendChild(listItem);
            }
        })
        .then((data) => {
            console.log(data);
        });
}

setTimeout(function() {
    drawTable()
}, 2000);

但最后我得到未定义而不是“产品”价值

Answer 1

这似乎是一个代码管理问题。 不幸的是，我无法测试它来为您解决它，但我注意到了一些问题。

第一个（如@Bergi 提到的）是两个函数getProducts和drawTable不返回任何内容

第二个问题是您并没有真正充分利用async & await ，例如，您可以像这样编写 function getProduct ：

async function getProduct(productId) {
    var productTitle = '';// this is useless btw
    let response = await fetch('http://193.176.79.173/api/products/' + productId, {
        method: 'GET'
    });
    let json = await response.json();
    let result = json['data']['title'];
    return result;
}

通过这种方式，您可以使代码更易于阅读和调试

所以尝试用async / await语法替换所有.then( ，并将return添加到getProducts和drawTable ，然后你会注意到错误

最后，如果您不async / await ，我会向您推荐这两个视频：
16.13: async/await 第 1 部分 - JavaScript/ES8 主题
16.14: async/await 第 2 部分 - JavaScript/ES8 主题
它们与您的情况非常相似

Answer 2

同意上面的2条评论。 您必须在异步function 中返回某些内容，或者抛出异常，从而导致.then或.catch 。

您可以等待在异步function 中返回正常 object 的fetch.then(...toJSON...) 。 或者进行长链调用，将所有代码放入.then(...)中。

见文件：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch