JavaScript를 사용하여 기본 XHR 요청을 약속하는 방법은 무엇입니까?

기본 XHR을 약속하는 방법

배경

현대 프런트엔드 개발에서 약속은 비동기 작업을 관리하는 데 필수적인 도구가 되었습니다. 많은 프레임워크가 약속을 위한 기본 제공 메커니즘을 제공하지만 네이티브 코드를 사용하여 이 기능을 달성하는 것도 가능합니다. 이 가이드는 기본 XHR(XMLHttpRequest) 요청을 Promise로 변환하는 방법을 보여줍니다.

1단계: 콜백을 사용하여 요청 함수 정의

콜백을 사용하는 기본 XHR 요청 함수를 생성하여 시작합니다.

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

2단계: Promise 구성 도입

이를 변환하려면 함수를 약속된 버전으로 변환하려면 약속 생성자를 활용하세요.

function makeRequest(method, url) {
  return new Promise(function (resolve, reject) {
    var 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();
  });
}

3단계: 매개변수 및 옵션으로 강화

요청 함수의 유연성을 향상하려면 메서드, URL, 및 선택적 옵션 객체:

function makeRequest(opts) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(opts.method, opts.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
      });
    };
    if (opts.headers) {
      Object.keys(opts.headers).forEach(function (key) {
        xhr.setRequestHeader(key, opts.headers[key]);
      });
    }
    var params = opts.params;
    if (params && typeof params === 'object') {
      params = Object.keys(params).map(function (key) {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
      }).join('&');
    }
    xhr.send(params);
  });
}

Usage

약속된 makeRequest 사용 함수를 사용하면 XHR을 비동기 작업으로 원활하게 수행할 수 있습니다.

makeRequest({
  method: 'GET',
  url: 'http://example.com'
})
.then(function (datums) {
  return makeRequest({
    method: 'POST',
    url: datums.url,
    params: {
      score: 9001
    },
    headers: {
      'X-Subliminal-Message': 'Upvote-this-answer'
    }
  });
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

대체 접근 방식

약속화의 대안은 약속에 대한 기본 지원을 제공하는 가져오기 API를 사용하는 것입니다. 그러나 가져오기는 모든 브라우저에서 지원되지 않을 수 있으며 폴리필이 필요할 수 있다는 점을 명심하세요.

위 내용은 JavaScript를 사용하여 기본 XHR 요청을 약속하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!