ajax 를 promise 형식 으로 포장 (2)

개술
promise 의 원 리 를 체험 하기 위해 서, 나 는 스스로 ajax 를 promise 의 형식 으로 포장 할 계획 이다.주로 다음 과 같은 기능 을 실현 하 기 를 바 랍 니 다.

// 1.  success error      ，            
promise.get(myUrl).success(successCallback1).error(errorCallback1).success(successCallback2).error(errorCallback2).error(errorCallback3).success(successCallback3);

// 2.        myUrl,         http           。
promise.get(myUrl1).success(successCallback1).get(myUrl2).error(errorCallback1).get(myUrl3).error(errorCallback2).success(successCallback1);

// 3.  post jsonp  。

ajax 에 대해 서 는 jq 의 ajax 를 사용 하지만, 가능 한 한 jq 의 deferred 대상 을 사용 하지 않 습 니 다.
이 박문 은 테스트 용 ajax 방법 을 실현 합 니 다.
테스트 용 ajax
실제 ajax 인터페이스 로 테스트 하기 가 매우 불편 하기 때문에 저 는 setTimeout 으로 ajax 방법 을 모 의 하여 테스트 를 했 습 니 다.
특히 node 단 에 서 는 setTimeout 대신 setImmediate 를 사용 하 는 것 이 좋 습 니 다.현재 브 라 우 저 쪽 에 서 는 IE 만 setImmediate 를 지원 합 니 다.

//   ajax
let mockAjax = ({ url, type, success, error }) => {
    let data = url + type, err = url + type, status;
    //     success  error
    setTimeout(() => {
        let rand = Math.random() > 0.1;
        if(rand) {
            status = 1;
            if(typeof success == 'function') success(data, status);
        } else {
            status = 0;
            if(typeof error == 'function') error(err, status);
        }
    });
}

mockAjax 는 무 작위 로 성공 하거나 실 패 했 습 니 다. 위의 0.1 을 변경 하여 관련 확률 을 높이 거나 낮 출 수 있 습 니 다.
설명 이 필요 한 것 은 chrome 개발 자 도구 에서 위의 코드 를 실행 하 는 것 이 좋 습 니 다. 다른 브 라 우 저 는 매개 변수 해 체 를 지원 하지 않 을 수 있 습 니 다.
mockAjax 로 테스트 진행

//   ajax
let mockAjax = ({ url, type, success, error }) => {
    let data = url + type, err = url + type, status;
    //     success  error
    setTimeout(() => {
        let rand = Math.random() > 0.5;
        if(rand) {
            status = 1;
            if(typeof success == 'function') success(data, status);
        } else {
            status = 0;
            if(typeof error == 'function') error(err, status);
        }
    });
}

let Promise = function() {
    this.eventName = {
        success: [],
        error: []
    };
};

Promise.prototype.success = function(cb) {
    this.eventName.success.push(cb);
    return this;
};

Promise.prototype.error = function(cb) {
    this.eventName.error.push(cb);
    return this;
};

Promise.prototype.get = function(url) {
    let that = this;
    setTimeout(() => {
        mockAjax({
            url: url,
            type: 'get',
            success: function (data, status) {
                let successList = that.eventName.success;
                if(successList || successList.length) {
                    for(let i = 0; i < successList.length; i++) {
                        successList[i](data, status);
                    }
                }
            },
            error: function (err, status) {
                let errorList = that.eventName.error;
                if(errorList || errorList.length) {
                    for(let i = 0; i < errorList.length; i++) {
                        errorList[i](err, status);
                    }
                }
            }
        });
    });

    return this;
};

// test===================
let successCallback = (message) => (data, status) => {
    console.log(data + '    ' + message);
}
let errorCallback = (message) => (err, status) => {
    console.log(err + '    ' + message);
}

let testPromise = new Promise();
testPromise.get('url1').success(successCallback(1)).success(successCallback(2)).error(errorCallback(1)).error(errorCallback(2));

브 라 우 저 출력 은 다음 과 같 습 니 다:

//     
url1get    1
url1get    2
//     
url1get    1
url1get    2

다 중 비동기 협력
다 중 비동기 상태 에서 무엇 을 되 돌려 줍 니까?

testPromise.get('url1').success(successCallback(1)).success(successCallback(2)).error(errorCallback(1)).error(errorCallback(2)).get('url2').success(successCallback(3)).error(errorCallback(3)).get('url3');

출력 은 다음 과 같 습 니 다:

url1get    1
url1get    2
url1get    3
url2get    1
url2get    2
url2get    3
url3get    1
url3get    2
url3get    3

냉정 하 게 분석 하면 url 1 이 되 돌 아 왔 을 때 url 2 와 url 3 이 되 돌아 오지 않 았 습 니 다. 이때 url 1 이 되 돌아 온 데이터 에 대해 세 개의 성공 적 인 리 셋 을 실 행 했 습 니 다.
그러나 더 많은 경우, 우 리 는 url 1, url 2, url 3 가 모두 돌아 온 후에 성공 적 인 리 셋 을 실행 하거나 실패 한 리 셋 을 실행 해 야 합 니 다.
이런 기능 은 우 리 는 다음 박문 에서 실 현 될 것 이다.
다음으로 전송:https://www.cnblogs.com/yangzhou33/p/9976171.html