如何修复无法读取未定义的属性(读取"foreach")和 response.json 不是一个函数？

Question

我正在弄清楚我的代码有什么问题，但我找不到正确的答案。我得到这个错误：

`TypeError: Cannot read properties of undefined (reading 'forEach') at renderUsers (forReviewCtrl.js:16)` 

这个错误

`TypeError: response.json is not a function
at getUsers (forReviewCtrl.js:7)
at renderUsers (forReviewCtrl.js:14)
at Object.<anonymous> (forReviewCtrl.js:36)`. 

我不明白。请有人向我解释原因，因为我是javascript新手。

这是代码：

angular.module('newApp').controller('forReviewCtrl', function(){
function getUsers() {
let url = '/tm-swagger-postman.json'; //API
try {
let response = fetch(url);
return response.json(); //error
} catch (error) {
console.log(error);
}
}
async function renderUsers() {
let users = await getUsers();
let html = '';
users.foreach(user => {               //the error
let htmlSegment = `<table border="3px;">
<tr>
<td>"${user.fname}"</td>
<td>"${user.last}"</td>
</tr>
<tr ng-repeat="user in users">
<td>"${user.fname}"</td>
<td>"${user.last}"</td>
</tr>
</table>
</div>`;

html += htmlSegment;
});

let container = document.querySelector('.container');
container.innerHTML = html;
}

renderUsers();
})

Answer 1

您忘记了一些async和await关键字。由于您正在尝试await对getUsers()的调用，请使函数async:

async function getUsers() {
//...
}

然后在该函数内，await进行异步操作：

let response = await fetch(url);
return await response.json(); 

Answer 2

您需要先解析fetch(url)，然后才能对其调用.json()。目前，您正在尝试对promise本身调用.json()，而不是其结果。

试试这个：

function getUsers() {
let url = '/tm-swagger-postman.json'; //API
return fetch(url)
.then(res => res.json())
.catch(error => console.log(error));
}