Promise를 사용하여 기본 XHR 요청을 어떻게 단순화할 수 있습니까?-JS 튜토리얼-php.cn

Promise를 사용하여 기본 XHR 요청을 어떻게 단순화할 수 있습니까?

Barbara Streisand

풀어 주다： 2024-12-07 07:50:13

원래의

306명이 탐색했습니다.

How Can I Simplify Native XHR Requests Using Promises?

Promisifying Native XHR: 단순화된 접근 방식

프런트엔드 애플리케이션에서 기본 Promise는 비동기 작업을 처리하는 편리한 방법을 제공합니다. 그러나 복잡한 프레임워크에 의존하지 않고 이를 기본 XHR 요청에 통합하는 것은 어려울 수 있습니다. 이 문서의 목표는 기본 XHR 요청 약속에 대한 간단한 가이드를 제공하여 이러한 격차를 해소하는 것입니다.

문제 이해

XHR 요청을 약속하기 전에 다음 사항을 이해하는 것이 중요합니다. 일반적인 콜백 기반 접근 방식입니다. 다음은 콜백을 사용하는 기본 XHR 요청의 예입니다.

function makeXHRRequest(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();
}

로그인 후 복사

이 접근 방식은 간단한 시나리오에 적합하지만 Promise가 제공하는 유연성과 구성성이 부족합니다.

Promisification using Promise 생성자

XHR 요청을 약속하기 위해 다음을 활용할 수 있습니다. 약속 생성자. 이 생성자는 각각 성공과 실패에 대한 콜백으로 생각할 수 있는 두 개의 인수인 해결과 거부가 있는 함수를 사용합니다.

Promise 생성자를 사용하도록 makeXHRRequest를 업데이트하겠습니다.

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();
  });
}

로그인 후 복사

이 코드는 새 Promise를 초기화하고 XHR 요청을 열고 성공과 오류를 모두 처리합니다. 시나리오.

연결 및 오류 처리

Promise는 여러 XHR 요청을 연결하고 오류를 효과적으로 처리하는 강력한 방법을 제공합니다. 다음은 요청 연결 및 오류 처리의 예입니다.

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

로그인 후 복사

이 코드에서는 먼저 'example.com'에 GET 요청을 한 다음 응답을 기반으로 또 다른 GET 요청을 보냅니다. 다른 엔드포인트(응답에 지정됨) 두 요청 중에 발생한 모든 오류는 catch 절에 의해 처리됩니다.

사용자 정의 매개변수 및 헤더

XHR 약속을 더욱 다양하게 만들기 위해 매개변수와 헤더를 사용자 정의할 수 있습니다. 헤더. 다음 시그니처가 있는 opts 객체를 소개하겠습니다.

{
  method: String,
  url: String,
  params: String | Object,
  headers: Object,
}

로그인 후 복사

다음은 사용자 정의 매개변수와 헤더를 허용하는 makeRequest의 수정된 버전입니다.

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);
  });
}

로그인 후 복사

이 버전은 더 많은 유연성을 제공합니다. XHR 요청을 수행하여 사용자 정의 매개변수 및 헤더를 지정할 수 있습니다.

결론적으로 기본 약속을 사용하여 XHR 요청을 약속하는 것은 간단한 접근 방식입니다. 이는 프런트엔드 코드의 유연성과 구성성을 향상시킵니다. 이를 통해 쉽게 비동기 XHR 요청을 만들고, 연결하고, 오류를 효과적으로 처리할 수 있습니다. 이 기사에서 설명한 개념을 활용하면 프런트엔드 애플리케이션 개발을 위한 기본 Promise의 잠재력을 활용할 수 있습니다.

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