无法从获取请求中迭代 Promise 值

Question

我在 JavaScript 中有一个简单的获取请求：

async function getItems(url){
try {
    return await fetch(url, {
        method: 'GET',
        cache: 'no-cache',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {return data});
} catch(e) {
}

在另一个函数中我有：

const items = getItems(url);
console.log(items);

const items = await getItems(url);

我得到的回复是：

Promise { "fulfilled" }
<state>: "fulfilled"
<value>: Array(13) [ {…}, {…}, {…}, … ]

所以，这意味着我得到了我的价值观。它们位于 <value> 中的承诺中。当我尝试使用以下项遍历项目时：

for (let i = 0; i < items.length; i++){
    html += '<option value="'+items[i].id +'">' + items[i].name +'</option>'
}

没有任何反应。所以，当我执行 console.log(items.length) 时，我得到的长度是 undefined。这听起来可能很愚蠢，而且我对 JavaScript 相当陌生，但我如何遍历数组以便构建我的 HTML？以下是我阅读过的资源，以便在没有任何帮助的情况下尝试解决这个问题，所以这就是我问的原因：

How to return the response from an asynchronous call

编辑：错误在这里：

const items = getItems(url);

我需要添加等待调用：

Answer 1

更新：如@Andreas 所述，问题不在于 fetch 调用，而在于 getItems(url) 调用本身。由于该方法是异步的，我们应该使用 await 关键字调用它，如下所示。

const items = await getItems(url);

由于您正在 return 获取调用，因此它将 return 一个承诺。相反，您应该 returning 从 json 响应中解析的数据。

试试这个

async function getItems(url){
try {
    const response = await fetch(url, {
        method: 'GET',
        cache: 'no-cache',
        headers: {
            'Content-Type': 'application/json',
        }
    });
    const data = await response.json();
    return data;
} catch(e) {
}

无法从获取请求中迭代 Promise 值

Unable to iterate Promise values from a fetch request

javascript

php

api

fetch