Vue에서 비동기 작업을 구현하기 위해 손으로 쓴 Promise 손글씨를 사용하는 방법

Vue는 매우 인기 있는 프런트 엔드 프레임워크입니다. 핵심 아이디어는 데이터 기반 뷰입니다. Vue는 데이터 응답 메커니즘과 구성 요소화 아이디어를 통해 프런트 엔드 개발 워크플로를 크게 단순화하여 개발자에게 보다 효율적이고 편리한 개발 경험을 제공합니다. Vue에서는 서버 데이터 요청, 타이머 등과 같은 비동기 작업을 수행해야 하는 경우가 많습니다. JavaScript에서 일반적으로 사용되는 비동기 작업 방법인 Promise는 Vue 프로젝트에서도 널리 사용됩니다. 이 글에서는 Vue에서 Promise를 직접 작성하여 비동기 작업을 구현하는 방법을 자세히 소개합니다.

Promise의 기본 사용법

Vue에서는 일반적으로 AJAX 요청을 통해 서버 데이터를 가져오는데, AJAX는 비동기 작업이므로 Promise로 캡슐화해야 합니다. Promise의 일반적인 사용법은 다음과 같습니다.

let promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    // 模拟异步操作结束
    let result = 'This is data requested from server.';
    // 将数据传递给 then 方法
    resolve(result);
  }, 1000);
});

promise.then(data => {
  console.log(data);
}).catch(error => {
  console.log(error);
});

위 코드에서는 먼저 Promise 객체를 생성합니다. Promise 생성자는 함수를 매개변수로 받습니다. 이 함수에는 성공을 위한 콜백 함수를 나타내는 두 개의 매개변수인 해결과 거부가 포함되어 있습니다. 그리고 각각 비동기 작업이 실패했습니다. 비동기 작업이 끝나면 확인 함수를 호출하여 then 메서드의 콜백 함수에 데이터를 전달합니다. 비동기 작업 중에 오류가 발생하면 거부 함수를 통해 catch 메서드의 콜백 함수에 오류 정보를 전달할 수 있습니다.

비동기 작업 구현에 대한 손으로 쓴 약속

Vue에서는 특정 도구 메서드나 Vue 인스턴스 메서드를 캡슐화하여 전역적으로 사용할 수 있도록 노출해야 하는 경우가 많습니다. 그러므로 손글씨 약속은 필수적인 기술이 되었습니다. 아래에서는 JavaScript 손으로 작성한 Promise를 사용하여 비동기 작업을 구현하는 방법을 보여줍니다.

먼저 비동기 작업을 캡슐화하는 함수를 정의하고 두 매개변수인 해결 및 거부를 전달하여 비동기 작업의 성공 또는 실패 콜백 함수를 제어해야 합니다. 코드는 다음과 같습니다.

function myPromise(fn) {
  let self = this;
  self.value = null;
  self.error = null;
  self.onFulfilled = null;
  self.onRejected = null;
  
  function resolve(value) {
    self.value = value;
    self.onFulfilled(self.value);
  }
  
  function reject(error) {
    self.error = error;
    self.onRejected(self.error);
  }

  fn(resolve, reject);
}

위 코드에서는 myPromise 함수를 정의하고 값, 오류 등 일부 변수를 초기화합니다. 함수에서는 두 개의 콜백 함수인 해결 및 거부를 정의하고 전달된 매개변수 fn을 사용하여 호출합니다. 해결 콜백 함수는 비동기 작업이 성공한 후 then 메서드에 데이터를 전달하는 데 사용되는 값을 받습니다. 거부 콜백 함수는 오류 메시지를 수신하며, 이는 비동기 작업이 실패한 후 오류 메시지를 catch 메서드에 전달하는 데 사용됩니다.

다음으로, 비동기 작업이 성공한 후 콜백 함수를 처리하기 위해 then 메서드를 구현해야 합니다. 코드는 다음과 같습니다.

myPromise.prototype.then = function(onFulfilled, onRejected) {
  let self = this;
  self.onFulfilled = onFulfilled;
  self.onRejected = onRejected;
};

위 코드에서는 myPromise 프로토타입에 then 메소드를 구현하고 두 개의 콜백 함수 onFulfilled 및 onRejected를 매개변수로 전달했습니다. 메소드에서는 이 두 콜백 함수를 Self 객체에 저장하고, 비동기 작업이 성공한 후 onFulfilled 함수를 호출하고, then 메소드의 콜백 함수에 데이터를 전달합니다. 비동기 작업이 실패한 후 onRejected 함수를 호출하고 오류 정보를 catch 메서드에 전달합니다.

마지막으로 비동기 작업이 실패한 후 콜백 함수를 처리하기 위해 catch 메서드를 구현해야 합니다. 코드는 다음과 같습니다.

myPromise.prototype.catch = function(onRejected) {
  let self = this;
  self.onRejected = onRejected;
};

위 코드에서는 myPromise 프로토타입에 catch 메소드를 구현하고 onRejected 콜백 함수를 매개변수로 전달했습니다. 메서드에서는 Self 개체에 onRejected 함수를 저장하고 비동기 작업이 실패한 후 onRejected 콜백 함수에 오류 메시지를 전달합니다.

종합 애플리케이션

다음으로 Vue를 기반으로 하고 myPromise와 결합된 비동기 작업을 구현하겠습니다. Vue 인스턴스에서는 서버 데이터를 요청하기 위한 비동기 메서드 fetchData를 정의합니다. fetchData 메소드에서는 Promise 객체를 직접 작성하여 데이터를 요청한 다음 데이터 속성에 데이터를 저장합니다.

new Vue({
  el: '#app',
  data: {
    data: null,
    error: null
  },
  methods: {
    fetchData: function() {
      let self = this;
      return new myPromise(function(resolve, reject) {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', '/api/data', true);
        xhr.onreadystatechange = function() {
          if(xhr.readyState === 4) {
            if(xhr.status === 200) {
              resolve(JSON.parse(xhr.responseText));
            } else {
              reject(xhr.statusText);
            }
          }
        };
        xhr.onerror = function() {
          reject(xhr.statusText);
        };
        xhr.send();
      });
    }
  },
  mounted: function() {
    let self = this;
    self.fetchData().then(function(data) {
      self.data = data;
    }).catch(function(error) {
      self.error = error;
    });
  }
});

위 코드에서는 먼저 Vue 인스턴스를 정의한 다음 data 속성에 데이터 및 오류 정보를 저장하는 데 사용되는 변수를 초기화합니다. fetchData 메소드에서는 Promise 객체를 직접 작성하고 AJAX 요청 객체를 생성한 다음 데이터 요청의 성공 및 실패에 대한 콜백 함수를 각각 해결 및 거부 함수에 전달합니다. 비동기 작업을 성공적으로 실행한 후 서버에서 반환된 데이터를 가져와 data 속성에 저장합니다. 비동기 작업이 실패하면 오류 정보를 가져와 오류 속성에 저장합니다. Mounted Hook 함수에서는 fetchData 메소드를 호출하여 서버 데이터를 획득하고 각각 then 및 catch 메소드를 통해 비동기 작업의 성공과 실패를 처리합니다. 비동기 작업이 성공한 후 서버에서 반환된 데이터를 가져와 전역 변수 self.data에 할당합니다. 비동기 작업이 실패한 후 오류 메시지를 받고 이를 전역 변수 self.error에 저장합니다.

Promise를 직접 작성하면 Promise의 원리와 사용법을 더 잘 이해할 수 있고, 자체 도구 메서드나 Vue 인스턴스 메서드를 캡슐화할 수 있습니다. 실제 개발에서는 프로젝트의 개발 효율성과 사용자 경험을 향상시키기 위해 특정 요구 사항과 비즈니스 시나리오를 기반으로 적절한 비동기 처리 방법을 선택해야 합니다.

위 내용은 Vue에서 비동기 작업을 구현하기 위해 손으로 쓴 Promise 손글씨를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!