Question

我在一个平台上解决了一个问题，但不知道怎么做？有人能帮我解决这个问题吗？问题描述

您将获得以下 API -

<块引用>

获取/api/评论

这将返回所有评论的列表。一个评论对象包含以下信息

userId - 评论用户的 ID

数据 - 评论数据

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

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

输入 - userId - 要返回其评论的用户 ID。

输出 - 给定用户 ID 的评论列表

样本输入 1 -

用户 ID = 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 的工作原理缺乏了解。对于过滤，正如艾伦所说，只需使用 Array.prototype.filter。

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

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

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);：您的测试代码正在模拟对网址 "/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);
});

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

3 个答案: