페이지를 통해 반복하는 URL을 얻고 나는 그것을 도면까지 등등 페이지에 URL을 이동 한 다음 URL을 얻을 수 있도록하려면

Question

를 가져올 사용하여 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/

Answer 1

난 당신의 코드를 이런 식으로 편집 한 :

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") 

Answer 2

return 동일의 기능과 일정을 다음 호출에서 fetch() 전화 함수도 참조하십시오 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")