遍历页面以获取 url 并使用 fetch 更改 url答案

【问题标题】：looping through pages to to get url and change the url using fetch遍历页面以获取 url 并使用 fetch 更改 url
【发布时间】：2018-04-15 12:05:35
【问题描述】：

我希望它能够去页面中的 url 并获取下一个 url 等等，直到绘图完成

function linkedDrawing(canvas,url){
    fetch(url)
   .then((response)=> response.json())
   .then((data)=>{
       url = data.url;
       alert(data.url);
       const c = canvas.getContext('2d');
       c.beginPath();
       c.moveTo(data.x1, data.y1);
       c.lineTo(data.x2, data.y2);
       c.strokeStyle = data.col;
       c.stroke();
     })
   }
 }
 linkedDrawing(linkedDrawingCanvas, "http://jacek.soc.port.ac.uk/tmp/ws/alpha.json")

我的小提琴：http://jsfiddle.net/g1nqkn7h/3/

【问题讨论】：

您没有提供足够的上下文。响应数据中有什么？我假设某处可能有一个URL？此外，准确询问您的代码中没有按预期工作的部分将鼓励我们帮助您完成显然是某种学校作业的事情。

标签： javascript fetch-api

【解决方案1】：

returnfetch() 从函数调用并安排对同一函数的下一次调用，另见multiple, sequential fetch() Promise

const canvas = document.getElementById("linkedDrawingCanvas");
const c = canvas.getContext('2d');

function draw(response) { 
  return response.json()
  .then(data => {       
    console.log(data.url);
    c.beginPath();
    c.moveTo(data.x1, data.y1);
    c.lineTo(data.x2, data.y2);
    c.strokeStyle = data.col;
    c.stroke();
    if (data.url) {
      return linkedDrawing(linkedDrawingCanvas, data.url).then(draw)
    } else {
      return "complete"
    }
  })
}

function linkedDrawing(canvas,url){
  return fetch(url)
  .then(draw)
}

linkedDrawing(linkedDrawingCanvas, "http://jacek.soc.port.ac.uk/tmp/ws/alpha.json")

【讨论】：

注意，jacek.soc.port.ac.uk/tmp/ws/boss_level.json 记录了 404 错误

【解决方案2】：

我以这种方式编辑了您的代码：

function linkedDrawing(canvas,url){


fetch(url)
  .then((response)=> response.json())
  .then((data)=>{
    const c = canvas.getContext('2d');
    console.log(data.url);
    c.beginPath();
    c.moveTo(data.x1, data.y1);
    c.lineTo(data.x2, data.y2);
    c.strokeStyle = data.col;
    c.stroke();
    //added this if to continue as long as we have value for URL. And recursively call the drawing function
    if(data.url) {
        linkedDrawing(canvas, data.url);
     }
  })
}

linkedDrawing(linkedDrawingCanvas, "http://jacek.soc.port.ac.uk/tmp/ws/alpha.json")

【讨论】：

注意，returned 来自linkedDrawing() 调用