js 비동기 반전 Promise

먼저 모두 가 비교적 잘 아 는 예;예전 에 우리 가 jquery ajax 요청 을 쓸 때 이렇게 썼 습 니 다.

$.ajax({
　　　　url: "test.json",
　　　　success: function(){
　　　　　　alert("hello world！");
　　　　},
　　　　error:function(){
　　　　　　alert("error");
　　　　}
　　});

그래서 jquery 1.7 버 전에 서 우 리 는 이렇게 쓰기 시작 했다.

$.ajax("test.json")
　　.done(function(){ alert("hello world！"); })
　　.fail(function(){ alert("error"); });

변 경 된 코드 가 더 알 기 쉽 고 읽 기 쉬 워 진 것 은 분명 하 다.이것 은 jquery 의 deferred 대상 입 니 다. jquery deferred 대상 은 jQuery 가 Promises 에 대한 실현 이 고 promises 를 실현 한 라 이브 러 리 도 개발 자 에 게 사용 할 수 있 습 니 다.마이크로소프트 의 WinJS. Promise, when. js, q, dojo. Deferred 처럼 모두 deferred 대상 을 드 러 냈 다.Promise 도 이미 ES6 에 포함 되 었 습 니 다. jQuery 가 Promises 를 실현 하 는 것 에 대해 우 리 는 잠시 말 하지 않 겠 습 니 다. 오늘 의 목적 은 Promise 입 니 다.
그럼 Promise 는 어떻게 된 거 예요?
사실은 Promise 는 하나의 대상 입 니 다. 비동기 작업 을 실현 하 는 데 사 용 됩 니 다. 비동기 코드 를 더욱 우아 하 게 쓰 고 읽 기 편 합 니 다.
Promise 의 특성: 1. Promise 대상 은 세 가지 상태 가 있 습 니 다. Pending (진행 중), Resolved (완료 되 었 습 니 다. Fulfilled) 와 Rejected (실패) 는 비동기 작업 결과 만 현재 상 태 를 바 꿀 수 있 고 다른 작업 은 상 태 를 바 꿀 수 없습니다. Promise 대상 의 상 태 는 '진행 중' 에서 '완료' 또는 '진행 중' 에서 '실패' 로 바 꿀 수 있 습 니 다.
2. Promise 대상 의 then 방법 은 바로 리 셋 함 수 를 지정 하 는 것 입 니 다.동기 화 작업 이 완료 되 지 않 으 면 지정 한 반전 함 수 를 호출 하고 항상 promise 대상 을 되 돌려 주 며 체인 호출 에 편리 합 니 다.그리고 같은 promise 의 then 은 여러 번 호출 할 수 있 습 니 다.
3. then 방법 은 두 개의 리 셋 함 수 를 매개 변수 로 받 아들 이 고 첫 번 째 매개 변 수 는 Resolved 에 성 공 했 을 때의 리 셋 이 며 두 번 째 는 Reject 에 실 패 했 을 때의 리 셋 입 니 다.두 번 째 매개 변 수 는 선택 할 수 있 는 동시에 then 은 다른 promise 를 받 아들 일 수 있 고 '클래스 then' 의 대상 이나 방법, 즉 thenable 대상 도 받 아들 일 수 있 습 니 다.우 리 는 지금 promise 로 코드 를 조직 합 니 다.

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        console.log('test123');
        setTimeout(function () {
            resolve('test');
        }, time);
    })
};
(function(){
    console.log('start');
    sleep(3000)
    .then(function(data){
        console.log(data);
        return sleep(5000);})
    .then(function(data){
        console.log(data);
        console.log('end');
    })
})();

위 코드 에서 sleep 방법 은 Promise 인 스 턴 스 를 되 돌려 일정 시간 후에 발생 하 는 결 과 를 표시 합 니 다.출력 결과: starttest 123 test 123 testnd
별일 아 닌 것 같 습 니 다. promises 의 진정한 강 한 점 은 다 중 링크 입 니 다. 비동기 실행 절차 에서 실행 코드 와 처리 결과 의 코드 를 뚜렷하게 분리 하 는 것 입 니 다. 체인 이 너무 긴 후에 화면 에 가득 찬 then 은 업무 가 도대체 무엇 을 했 는 지 헷 갈 리 는 단점 이 있 습 니 다.
Promise api
1. Promise. resolve () 2, Promise. reject () 3, Promise. prototype. then () 4, Promise. prototype. catch () 5, Promise. all () / / 모든 것 이 완성 되 었 고 6, Promise. race () / / 에 해당 하 는 것 을 완성 하면 됩 니 다.
1. Promise. resolve () 의 역할 은 기 존 대상 을 Promise 대상 resolvedl 로 전환 합 니 다.Promise. resolve ('test') = = new Promise (resolve = > resolve ('test') 2, Promise. reject () 도 Promise 대상 을 되 돌려 주 고 상 태 는 rejected 이다.

let p=Promise.reject('error') == let p=new Promise((resolve,reject)=>reject('error'));

 p.catch(data=>{
    console.log(data);
 })

Promise 대상 의 인 스 턴 스 대상 p 를 만 들 고 오 류 를 던 지면 상태 가 Rejected 로 바 뀌 며 p. catch () 가 지정 한 리 셋 함 수 를 호출 합 니 다.3. then () 방법, then 방법 은 원형 대상 Promise. prototype 에 정 의 된 것 으로 Promise 대상 에 리 셋 함 수 를 추가 하 는 역할 을 합 니 다.

let p=new Promise(resolve=>resolve('hello'));
p.then((resolve,reject)=>{
    console.log(resolve);
}).then(function(){
  console.log('zhangsan');
})

then 방법의 첫 번 째 매개 변 수 는 Resolved 상태의 리 셋 함수 이 고 두 번 째 매개 변 수 는 Rejected 상태의 리 셋 함수 입 니 다.체인 동작 을 사용 하여 여러 개의 then () 을 지정 하여 순서대로 실행 할 수 있 습 니 다. 위의 코드 출력 결 과 는 'hello', 'zhangsan' 4, 'catch (): 잘못된 리 셋 함수 가 발생 했 습 니 다. 마찬가지 로 catch 방법 도 원형 대상 Promise. prototype 에 정 의 된 것 입 니 다. 사례 는 Promise. reject () 의 예 입 니 다.주: Promise 상태 가 resolved 로 바 뀌 었 다 면 오 류 를 던 지 는 것 은 무효 입 니 다.

var p = new Promise(function(resolve, reject) {
  resolve('success');
  reject('fail');
});
p.then(function(value) { console.log(value) })
  .catch(function(error) { console.log(error) }); 

출력 결과: success;5. Promise. all () 의 역할 은 여러 개의 인 스 턴 스 를 동시에 실행 하고 동기 화 병행 하 는 것 입 니 다. 따라서 인 스 턴 스 가 resolve 상태 로 돌아 가 야 Promise 가 resolve 상태 로 바 뀔 수 있 습 니 다. 그 중 하 나 는 rejected 이 고 promise 의 상 태 는 rejected 입 니 다.주: Promise. all 방법의 인 자 는 배열 이 아 닐 수 있 지만 Iterator 인터페이스 대상 이 어야 하 며 promise 인 스 턴 스 를 되 돌려 야 합 니 다. 그렇지 않 으 면 오류 가 발생 했 습 니 다: error: TypeError: [object Promise] is not iterable!

let p1 =new Promise(function(resolve,reject){
        resolve(1);
});
let p2 = new Promise(function(resolve,reject){
            resolve(2);
    });
let p3 = new Promise(function(resolve,reject){
       // reject();
        resolve(3);
    });
Promise.all([p1, p2, p3]).then(function (results) {
    console.log('success:'+results);
}).catch(function(r){
    console.log("error");
    console.log(r);
});

위 코드 출력: success: 1, 2, 3;p3 방법 을 reject () 로 되 돌리 기;출력 결 과 는: error;6. Promise. race () 의 역할 도 여러 개의 인 스 턴 스 를 동시에 수행 합 니 다. 하나의 인 스 턴 스 가 상 태 를 바 꾸 면 Promise 는 그 인 스 턴 스 가 바 꾼 상태 로 바 꿉 니 다.

 let p1 =new Promise(function(resolve,reject){
     setTimeout(function(){
        reject(1);
     },3000)
});
let p2 = new Promise(function(resolve,reject){
    setTimeout(function(){
        resolve(2);
    },1000)
});
Promise.race([p1, p2]).then(function (results) {
    console.log('success:'+results);
}).catch(function(results){
    console.log("error:"+results);
});
  :success: 2;

위의 코드 p2 가 먼저 실행 되 었 고 상 태 를 resolve 로 바 꾸 었 기 때문에 promise 의 상 태 는 resolve 로 바 뀌 었 습 니 다.우 리 는 p1 의 시간 을 1000, p2 를 3000 으로 바 꾸 었 다. 즉, p1 이 먼저 실행 되 었 고 promise 의 상태 도 reject 로 바 뀌 었 다. 출력: error: 1
깊이 공부 하고 싶다 면 응 우 옌 일 펑 의 'ES 6 》 프로 미스 파 트 를 살 펴 볼 수 있다.http://es6.ruanyifeng.com/#do...상세 하 다