无法理解在这种情况下如何使用fetch ?

Question

我正在解决一个平台上的问题，但不知道如何做到这一点?有人能帮我一下吗?问题描述

您将获得以下API -

/api/评论

这将返回所有注释的列表。注释对象包含以下信息

userId -发表评论的用户ID

data -注释data

给定userId，返回给定用户所有评论的评论数据数组。

注意除了.json()之外，不要在fetch()调用返回的响应对象上使用任何其他方法。这可能导致测试失败。

Input - userId -要返回评论的用户id。

输出-给定用户id

的注释列表样本输入1 -

userId = 1

API响应样例

comments = [
{
'userId': '1',
"data": 'This looks slick!'
},
{
'userId': '2',
"data": 'I think this can be improved.'
},
{
'userId': '1',
"data": 'What kind of improvement?'
}]

示例输出1 -['这看起来很光滑!、"什么样的改进?"']

下面的代码我们必须完成

// TODO - Implement getCommentsByUserId() function
async function getCommentsByUserId(userId) 
{
let v=await fetch(`/api/comments/${userId}`,{})
.then(response=>)
}
// ----------- Don't modify -----------
const mockFetch = (url, responseData) => {
const mockJsonPromise = Promise.resolve(responseData);
const mockFetchPromise = (callUrl) => {
if (url === callUrl) {
return Promise.resolve({
json: () => mockJsonPromise
});
} else {
return Promise.reject('404: No such url')
}
}
global.fetch = mockFetchPromise;
}
const successResponse = [
{
'userId': '1',
"data": 'This looks slick!'
},
{
'userId': '2',
"data": 'I think this can be improved.'
},
{
'userId': '1',
"data": 'What kind of improvement?'
}];
mockFetch('/api/comments', successResponse);
module.exports = getCommentsByUserId;
// ----------- Don't modify -----------
getCommentsByUserId("1").then((res) => {
console.log(res);
});

Answer 1

使用Array.prototype.filter:

let v = await fetch(`/api/comments/${userId}`,{})
.then(response=> response.json())
.then(comments => comments.filter(comment => comment.userId === userId))

Answer 2

您对async/await的工作原理缺乏一些了解。对于滤波，就像Alan说的，只用Array.prototype.filter。

调用fetch时，返回Promise。如果您使用await fetch(...)，代码将等待，直到获取完成，并返回该API调用的响应。

async函数总是返回Promise(除非用await调用)。但是，在async函数中编写return语句时，必须返回一个正常值。

async function getCommentsByUserId(userId) 
{
let response = await fetch(`/api/comments/${userId}`,{});
let comments = response.json();
return comments.filter(comment => comment.userId === userId);
}

可以这样做，也可以使用普通函数。

function getCommentsByUserId(userId) 
{
return fetch(`/api/comments/${userId}`,{})
.then(res => res.json())
.then(comments => comments.filter(comment => comment.userId === userId));
}

你的测试代码也有很多问题:

• mockFetch('/api/comments', successResponse);:您的测试代码正在模拟url"/api/comments/1"的调用，而您正在模拟"/api/comments"的API调用
• json: () => mockJsonPromise:Response.json()函数期望返回一个实际值，而不是一个承诺。

这是我的固定版本。

const mockFetch = (url, responseData) => {
return (callUrl) => {
if (url === callUrl) {
return Promise.resolve({
json: () => (responseData)
});
} else {
return Promise.reject('404: No such url')
}
};
}
const successResponse = [
{
'userId': '1',
"data": 'This looks slick!'
},
{
'userId': '2',
"data": 'I think this can be improved.'
},
{
'userId': '1',
"data": 'What kind of improvement?'
}];
global.fetch = mockFetch('/api/comments/1', successResponse);
async function getCommentsByUserId(userId) {
let response = await fetch(`/api/comments/${userId}`, {});
let comments = response.json();
return comments.filter(comment => comment.userId === userId);
}
getCommentsByUserId("1").then((res) => {
console.log(res);
});

Answer 3

我已经做了一些改变，现在它的工作很好，但仍然，它不清除任何测试用例。但是，它返回与要求相同的输出。

// TODO - Implement getCommentsByUserId() function
async function getCommentsByUserId(userId) {
try{
let response = await fetch(`/api/comments`, {});
let comments = response.json();
comments =  comments.filter(comment => comment.userId === userId);
a=[]
for(i of comments){
a.push(i.data)
}
return a;
}
catch{
return('404: No such url')
}
}
// ----------- Don't modify -----------
const mockFetch = (url, responseData) => {
const mockJsonPromise = Promise.resolve(responseData);
const mockFetchPromise = (callUrl) => {
if (url === callUrl) {
return Promise.resolve({
json: () => (responseData)
});
} else {
return Promise.reject('404: No such url')
}
}
global.fetch = mockFetchPromise;
}
const successResponse = [
{
'userId': '1',
"data": 'This looks slick!'
},
{
'userId': '2',
"data": 'I think this can be improved.'
},
{
'userId': '1',
"data": 'What kind of improvement?'
}];
mockFetch('/api/comments', successResponse);
module.exports = getCommentsByUserId;
// ----------- Don't modify -----------
getCommentsByUserId("1").then((res) => {
console.log(res);
});