JavaScript使用async await调用接口返回undefined问题求解

问题原因 #

• 核心错误：getProducts函数没有返回Promise对象。你在函数内部调用了fetch并编写了后续处理逻辑，但没有把整个fetch的Promise链作为返回值抛出，导致外部await getProducts()拿到的是async函数默认返回的undefined，而非你期望的拼接完成的商品HTML字符串。
• 其他可修复问题：
  • getProducts接收了orderId参数，但实际请求接口时用了固定写死的订单ID，无法按传入参数查询对应订单的商品数据
  • 拼接HTML字符串时，/h2>前遗漏了<符号，会导致标签渲染异常
  • 不需要额外用setTimeout延迟1秒返回productsText，你已经通过await getProduct拿到了所有商品的标题数据，处理完成后可以直接返回
  • 变量orderIdNew未声明就赋值，会污染全局作用域

修复后的完整代码 #

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

async function getProducts(orderId) {
    // 修复点1：return整个fetch的Promise链
    return fetch('http://193.176.79.173/api/orders/' + orderId, { // 修复点2：替换固定订单ID为传入的参数
        method: 'GET'
    })
    .then((response) => response.json())
    .then(async function(data) {
        let productsText = '';
        console.log(data);
        for (var i = 0; i < data['orderProducts'].length; i++) {
            const product = await getProduct(data['orderProducts'][i].product_id);
            console.log(product);
            productsText += '<div class="mdl-card__title">' +
                // 修复点3：补全h2闭合标签
                '<h2 class="mdl-card__title-text">' + product + '</h2>';
            console.log(productsText);
        }
        // 修复点4：删掉无用的setTimeout延迟，直接返回结果
        return productsText;
    })
}

const myList = document.querySelector('#list');
async function drawTable() {
    fetch('http://193.176.79.173/api/paidOrders/')
        .then((response) => response.json())
        .then(async function(data) {
            let products = '';
            for (var i = 0; i < data.data.length; i++) {
                const listItem = document.createElement('div');
                const orderId = data.data[i].id;
                // 修复点5：给变量加声明，避免污染全局
                let orderIdNew = orderId.toString();
                const lastChar = orderIdNew.substr(orderIdNew.length - 1);
                const lastCharNum = parseInt(lastChar, 10) - 1;
                const orderIdNewNew = orderIdNew.replace(/.$/, lastCharNum);
                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);

内容的提问来源于stack exchange，提问作者fourston