使用一个 API 的结果作为另一个的参数并将两个结果插入 JSON 数组

Question

所以我有 2 APIs:

localhost:8080/projects（给我我拥有的项目列表）

localhost:8080/tasks/{projectid}（提供与我用作参数的项目 ID 相关的任务列表）

我正在使用 nodejs 获取第一个 API 的结果，然后将它们插入到 JSON 数组中，同时从同一个请求中获取每个 id 并将它们用于第二个 api 获取任务，最后我将获取这些任务并将它们插入到与项目相同的 JSON 数组中。

但是我运行遇到了一个问题，在完成操作后我会尝试显示 JSON 数组只是为了发现它只包含项目名称（这是结果来自第一个 API)，但没有找到第二个的信息。

以下是我使用的方法：

首先我做了2个方法，一个是获取项目，一个是获取任务，我在两个方法中都使用了回调：

const projects = (callback) =>{
const url='localhost:8080/projects'
request({url,json:true},(error,{body}) =>{
    if(error){
        callback('error')
    }else{
        callback(undefined,body)
    }
})
}

const tasks = (projectid,callback) =>{
    const url='localhost:8080/tasks/'+encodeURIComponent(projectid)
    request({url,json:true},(error,{body})=>{
        if(error){
            callback('unable to find data')
        }else{
            callback(undefined,body)
=        }
    })
}

然后我使用 express 为这两种方法定义路由：

app.get('/projects',(req,res)=>{
    func.projects((error,body)=>{
    if(error){
        return res.send({
            error : error
        })
    }
  res.send(body)
    })
})


app.get('/tasks',(req,res)=>{
    func.tasks(req.query.code,(error,body)=>{
        if(error){
            return res.send({
                error : error
            })
        }
        res.send(body)
    })
})

最后，我尝试使用 Javascript 将这 2 条路线的数据提取到 json 数组中，并在 handlabars 页面中显示它们：

fetch('/projects').then((response) => {
    response.json().then((res) => {
        if (res.error) {
            console.log(res.error)
        } else {

            data = { todo: [] }

            //insert each project into our json array
            res.forEach((project) => {
        
                data.todo.push({ id: project.id, text: project.id })
                
                //Now we'll get the tasks using the project id as argument
                fetch('/tasks?code='+encodeURIComponent(project.id)).then((response)=>{
                    response.json().then((res)=>{
                        if(res.error){
                            console.log(error)
                        } else {
                            //add each task to the same array
                            res.forEach((task) => {
                            data.todo.push({text: task.desc, parent: item.id})
                            })
                        }
                    })
                })
            })
            gantt.parse(data);
        }
    })
})

抱歉这么久了 post 我只是想解释一下所有的细节。谢谢。

编辑：我的程序的目标是使用 json 文件作为甘特图的参数，这就是为什么我在将 json 对象传递给函数只显示项目，但现在显示任务。

尽管当我使用 console.log 函数时它显示我的对象确实包含任务。我认为这里的问题是该函数同时执行两个 foreach，这就是为什么它没有 return 任务，因为它还没有所需的参数

Answer 1

我希望你明白 fetch 是异步的，这就是为什么你有一个 then 块，在异步操作完成后执行代码。我以您的示例为例，然后添加了内联注释，其中包含指示执行流程的数字。

// 1. Starts execution.
fetch('/projects').then((response) => {
    response.json().then((res) => {
        if (res.error) {
            console.log(res.error)
        } else {
            // 2. Res has the list of projects.
            data = { todo: [] }

            //insert each project into our json array
            res.forEach((project) => {
        
                data.todo.push({ id: project.id, text: project.id })
                // 3. Fetch is called for each project.
                //Now we'll get the tasks using the project id as argument
                fetch('/tasks?code='+encodeURIComponent(project.id)).then((response)=>{
                    response.json().then((res)=>{
                        if(res.error){
                            console.log(error)
                        } else {
                             // 5. Data is push is to the array.
                            //add each task to the same array
                            res.forEach((task) => {
                            data.todo.push({text: task.desc, parent: item.id})
                            })
                        }
                    })
                })
            })

            // 4. parse is called.
            gantt.parse(data);
        }
    })
})

如您所见，gantt.parse(data) 在后续获取请求的数据到达之前被调用。这意味着您必须等待所有请求完成才能调用 gantt.parse(data)。您可以为此使用 Promise.all。

您还提到 console.log 显示了数据。那是因为 console.log 通常通过引用起作用。尝试 console.log(JSON.stringify(data))，您会看到丢失的数据。

为了四舍五入，我将使用 public API.

添加一个使用 Promise.all 的示例

fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => response.json())
.then(todos => {
    // I'm just taking the first 5 todos.
    todos = todos.slice(0, 5);
    const data = {
        todos: []
    };
    const requests = [];
    todos.forEach(todo => {
        data.todos.push({
            id: todo.id,
            title: todo.title
        });
        requests.push(fetchComments(todo.id));
    });

    Promise.all(requests).then(responses => {
        console.log(data);
        // Here is where you will call gnatt.parse
    });


    function fetchComments(id) {
        return fetch(`https://jsonplaceholder.typicode.com/todos/${id}/comments`)
            .then(res => res.json()).then(comments => {
                comments.forEach(comment => {
                    data.todos.push({
                        id: comment.id,
                        parent: id
                    });
                });
            });
    }
});

使用一个 API 的结果作为另一个的参数并将两个结果插入 JSON 数组

Using the result from one API as a parameter for another and inserting both results into a JSON array

javascript

json

node.js

express

handlebars.js