递归获取 JSON 并绘制对象，直到 404

Question

我目前正在尝试从URL递归调用JSON对象，然后用当前对象信息画一条线（完成后应该建立一个正方形）。获取 JSON 对象并绘制线条后，它应该使用获取对象中的 URL 调用具有后续详细信息的新 JSON 对象。

一旦最终网址返回 404，它应该停止，并且应该构建一个包含用于构造图像的所有 URL 的数组。

对象的结构如下：

{
  x1: 0,
  y1: 0,
  x2: 100,
  y2: 100,
  col: 'red',
  url: 'http://nexturl.com/nextLine.json'
}

我目前有这个功能：

async function linkedDrawing(canvas, url) {
    let urlArr = [url];
    const c = document.getElementById(canvas).getContext('2d');
    const response = await fetch(url);
    let json;
    while(response.ok) {
        json = await response.json();
        c.lineWidth = 3;
        c.strokeStyle = json.col;
        c.beginPath();
        c.moveTo(json.x1, json.y1);
        c.lineTo(json.x2, json.y2);
        c.stroke();
    }
    urlArr.push(url);
    return urlArr;
}

如何修改它以使其工作？

Answer 1

我想你快到了。你能试试这个，让我知道这是否有效吗？不过还没有测试过，因为该网址无法访问。

const c = document.getElementById(canvas).getContext('2d');
let url = 'http://someurl';
linkedDrawing(c, url, [])
    .then(console.log)
    .catch(console.log);
async function linkedDrawing(canvas, url, urlsArray) {
    urlsArray.push(url);
        const response = await fetch(url);
        if (response.ok) {
            let json = await response.json();
            c.lineWidth = 3;
            c.strokeStyle = json.col;
            c.beginPath();
            c.moveTo(json.x1, json.y1);
            c.lineTo(json.x2, json.y2);
            c.stroke();
            return await linkedDrawing(canvas, json.url, urlsArray);
        }
        else {
            return urlsArray
        }
}