ES6 Promise 객체의 응용 사례 분석

본고의 실례는 ES6 Promise 대상의 응용을 서술하였다.여러분에게 참고하도록 공유하겠습니다. 구체적으로는 다음과 같습니다.
The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
Promise 객체는 비동기식 작업의 최종 완료(또는 실패) 및 결과 값을 나타내는 데 사용됩니다.간단하게 말하면 이것은 비동기 조작을 처리하는 데 쓰인다. 비동기 처리가 성공하면 성공한 조작을 하고 비동기 처리가 실패하면 오류를 포착하거나 후속 조작을 정지한다.
프로미스트 전에 비동기 리셋을 처리하는 방식

function asyncFun(a,b,callback) {
   setTimeout(function () {
    callback(a+b);
   },200);
  }
  asyncFun(1,2, function (res) {
   if(res > 2) {
    asyncFun(res, 2, function (res) {
     if(res > 4) {
      asyncFun(res, 2, function (res) {
       console.log('ok');
       console.log(res);
      })
     }
    })
   }
  });

위에서 이른바'회조지옥'의 무서움을 알 수 있다
프로미스트를 사용하여 우아하게 비동기 처리

function asyncFun(a,b) {
 return new Promise(function (resolve, reject) {
  setTimeout(function() {
   resolve(a + b);
  },200);
 })
}
asyncFun(1,2)
.then(function (res) {
 if(res > 2) {
  return asyncFun(res, 2);
 }
})
.then(function (res) {
 if(res > 4) {
  return asyncFun(res, 2);
 }
})
.then(function (res) {
 console.log('ok');
 console.log(res);
})
.catch(function (error) {
 console.log(error);
});

프로미스를 사용하여 내부 이상을 처리하는 예

function asyncFun(a,b) {
 return new Promise(function (resolve, reject) {
  //  
  if(typeof a !== 'number' || typeof b !== 'number') {
   reject(new Error('no number'));
  }
  setTimeout(function() {
   resolve(a + b);
  },200);
 })
}
asyncFun(1,2)
.then(function (res) {
 if(res > 2) {
  return asyncFun(res, 2);
 }
},function (err) {
 console.log('first err: ', err);
})
.then(function (res) {
 if(res > 4) {
  return asyncFun(res, 'a');
 }
},function (err) {
 console.log('second err: ', err);
})
.then(function (res) {
 console.log('ok');
 console.log(res);
},function (err) {
 console.log('third err: ', err);
});

위에서 보듯이then의 두 번째 리셋 함수를 통해 프로미스 대상의 이상을 처리하고,reject를 통해 이상한 프로미스 대상을 되돌려줍니다
catch를 통해 오류를 통일적으로 처리하고finally를 통해 최종적으로 실행해야 하는 논리를 실행합니다

function asyncFun(a,b) {
 return new Promise(function (resolve, reject) {
  //  
  if(typeof a !== 'number' || typeof b !== 'number') {
   reject(new Error('no number'));
  }
  setTimeout(function() {
   resolve(a + b);
  },200);
 })
}
asyncFun(1,2)
.then(function (res) {
 if(res > 2) {
  return asyncFun(res, 2);
 }
})
.then(function (res) {
 if(res > 4) {
  return asyncFun(res, 'a');
 }
})
.then(function (res) {
 console.log('ok');
 console.log(res);
})
.catch(function (error) {
 console.log('catch: ', error);
})
.finally(function () {
 console.log('finally: ', 1+2);
});

Promise를 통해all () 정적 방법으로 여러 비동기 처리

function asyncFun(a,b) {
 return new Promise(function (resolve, reject) {
  setTimeout(function() {
   resolve(a + b);
  },200);
 })
}
var promise = Promise.all([asyncFun(1,2), asyncFun(2,3), asyncFun(3,4)])
promise.then(function (res) {
 console.log(res); // [3, 5, 7]
});

Promise를 통해race () 정적 방법으로 여러 비동기 중 가장 빠른 것을 얻기

function asyncFun(a,b,time) {
 return new Promise(function (resolve, reject) {
  setTimeout(function() {
   resolve(a + b);
  },time);
 })
}
var promise = Promise.race([asyncFun(1,2,10), asyncFun(2,3,6), asyncFun(3,4,200)])
promise.then(function (res) {
 console.log(res); // 5
});

Promise를 통해resolve () 정적 방법으로 성공한 비동기 대상을 직접 되돌려줍니다

var p = Promise.resolve('hello');
p.then(function (res) {
 console.log(res); // hello
});

다음과 같습니다.

var p = new Promise(function (resolve, reject) {
 resolve('hello2');
})
p.then(function (res) {
 console.log(res); // hello2
});

Promise를 통해reject () 정적 방법으로 실패한 비동기 대상을 직접 되돌려줍니다

var p = Promise.reject('err')
p.then(null, function (res) {
 console.log(res); // err
});

다음과 같습니다.

var p = new Promise(function (resolve, reject) {
 reject('err2');
})
p.then(null, function (res) {
 console.log(res); // err
});

작은 예를 통해 Promise가 대상에 적용되는 것을 테스트합니다

'use strict';
class User{
 constructor(name, password) {
  this.name = name;
  this.password = password;
 }
 send() {
  let name = this.name;
  return new Promise(function (resolve, reject) {
   setTimeout(function () {
    if(name === 'leo') {
     resolve('send success');
    }else{
     reject('send error');
    }
   });
  });
 }
 validatePwd() {
  let pwd = this.password;
  return new Promise(function (resolve, reject) {
   setTimeout(function () {
    if(pwd === '123') {
     resolve('validatePwd success');
    }else{
     reject('validatePwd error');
    }
   });
  })
 }
}
let user1 = new User('Joh');
user1.send()
 .then(function (res) {
  console.log(res);
 })
 .catch(function (err) {
  console.log(err);
 });
let user2 = new User('leo');
user2.send()
 .then(function (res) {
  console.log(res);
 })
 .catch(function (err) {
  console.log(err);
 });
let user3 = new User('leo', '123');
user3.validatePwd()
 .then(function (res) {
  return user3.validatePwd();
 })
 .then(function (res) {
  console.log(res);
 })
 .catch(function(error) {
  console.log(error);
 });
let user4 = new User('leo', '1234');
user4.validatePwd()
 .then(function (res) {
  return user4.validatePwd();
 })
 .then(function (res) {
  console.log(res);
 })
 .catch(function(error) {
  console.log(error);
 });

JavaScript에 관한 더 많은 내용은 본 사이트의 주제를 보실 수 있습니다.,,,,,,,,,,,,
이 문서가 JavaScript 프로그램 설계에 도움이 되었으면 합니다.