'setTimeout'이 약속 체인에서 JSON 구문 분석 오류를 일으키는 이유는 무엇입니까?

setTimeout이 프로미스 체인에서 JSON 구문 분석 오류를 일으키는 이유는 무엇입니까?

JavaScript의 프로미스 체인을 활용할 때 흔히 발생하는 함정은 setTimeout을 잘못 사용하려고 시도하는 것입니다. 아래 예에서 getLinks 함수는 제공된 URL에서 링크 세트를 가져오는 프라미스를 반환합니다.

<code class="javascript">function getLinks(url) {
  return new Promise((resolve, reject) => {
    // ...XHR logic to fetch links...
  });
}</code>

이후 또 다른 getLinks 호출은 첫 번째 링크의 콘텐츠를 검색합니다.

<code class="javascript">getLinks('links.txt')
  .then((links) => {
    const allLinks = JSON.parse(links);
    return getLinks(allLinks["one"] + ".txt");
  })
  .then((topic) => {
    // ...logic to write topic to body...
    setTimeout(() => {
      return getLinks(allLinks["two"] + ".txt"); // This is where the error occurs
    }, 1000);
  });</code>

그러나 이 코드는 JSON 구문 분석 오류(JSON.parse: 예기치 않은 문자...)를 발생시킵니다. 그 이유는 setTimeout을 부적절하게 사용했기 때문입니다.

Promise Chain 이해

Promise Chain은 순차적으로 실행되는 일련의 비동기 작업입니다. 각 작업(또는 핸들러)은 약속을 반환합니다. 결과적으로 각 then 핸들러에는 이전 Promise의 결과가 전달됩니다.

setTimeout의 역할

setTimeout 콜백은 Promise 체인의 일부가 아닌 비동기식으로 실행됩니다. setTimeout 콜백에서 값을 반환하면 then 핸들러에서 값이 반환되지 않습니다. 대신, then 핸들러가 완료되기 전에 값을 반환해야 합니다.

해결책

Promise 체인에서 후속 Promise의 실행을 지연하려면 then 핸들러에서 다음을 수행하는 Promise를 반환해야 합니다. 원하는 지연 후에 해결됩니다.

<code class="javascript">...
.then((topic) => {
  writeToBody(topic);

  // Replace the setTimeout call with a delay promise
  return delay(1000).then(() => {
    return getLinks(allLinks["two"] + ".txt");
  });
});</code>

지연 함수는 다음과 같이 구현할 수 있습니다.

<code class="javascript">function delay(t, val) {
  return new Promise((resolve) => setTimeout(resolve, t, val));
}</code>

또는 Promise에 확장 메서드를 정의하여 구문을 단순화할 수 있습니다.

<code class="javascript">Promise.prototype.delay = function(t) {
  return this.then((val) => {
    return delay(t, val);
  });
}

...

.then((topic) => {
  writeToBody(topic);
  return delay(1000).delay(500);
});</code>

이 접근 방식을 사용하면 약속 체인이 그대로 유지되고 후속 작업이 예상대로 실행됩니다.

위 내용은 'setTimeout'이 약속 체인에서 JSON 구문 분석 오류를 일으키는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!