약속이 어떻게 JavaScript에서 비동기 XHR 요청을 단순화할 수 있습니까?

프로미스가 기본 XHR을 사용하여 비동기 프로그래밍을 활성화하는 방법

프런트엔드 앱에서 XHR로 작업할 때 간소화된 비동기식 프로그래밍을 위해 프라미스를 활용하는 것이 바람직한 경우가 많습니다. 프로그램 작성. 그러나 큰 프레임워크 없이 Promisified XHR을 구현하는 것은 어려울 수 있습니다.

네이티브 XHR 이해

Promisification에 대해 자세히 알아보기 전에 콜백을 사용하여 기본 XHR 요청을 수행하는 방법을 검토해 보겠습니다. :

function makeRequest(method, url, done) {
  const xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function() {
    done(null, xhr.response);
  };
  xhr.onerror = function() {
    done(xhr.response);
  };
  xhr.send();
}

Promise 소개 XHR

기본 XHR을 약속하기 위해 Promise 생성자를 활용합니다.

function makeRequest(method, url) {
  return new Promise(function(resolve, reject) {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: xhr.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function() {
      reject({
        status: xhr.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

이제 .then() 및 .catch를 사용하여 비동기 XHR 요청을 원활하게 연결하고 처리할 수 있습니다. ():

makeRequest('GET', 'http://example.com')
  .then(function(datums) {
    console.log(datums);
  })
  .catch(function(err) {
    console.error('Augh, there was an error!', err.statusText);
  });

향상됨 기능

사용자 정의 가능한 옵션 개체를 허용하여 makeRequest 기능을 더욱 향상할 수 있습니다.

function makeRequest(opts) {
  return new Promise(function(resolve, reject) {
    // ... (code remains similar to previous example) ...
  });
}

이를 통해 POST/PUT 데이터 및 사용자 정의 헤더와 같은 매개변수를 지정할 수 있습니다.

makeRequest({
  method: 'GET',
  url: 'http://example.com',
  params: {
    score: 9001
  },
  headers: {
    'X-Subliminal-Message': 'Upvote-this-answer'
  }
});

결론적으로 네이티브 XHR을 약속하면 프런트엔드 애플리케이션에서 비동기 프로그래밍을 단순화하고 향상시킬 수 있는 강력한 수단을 제공합니다. 사용자 정의 가능한 옵션과 함께 Promise 생성자를 활용하면 XHR 요청 처리에 대한 유연하고 효율적인 접근 방식이 제공됩니다.

위 내용은 약속이 어떻게 JavaScript에서 비동기 XHR 요청을 단순화할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!