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

개술
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 대상 을 사용 하지 않 습 니 다.이 박문 완성 기능 1, 기타 기능 은 다른 박문 에서 완성 합 니 다.
기능
처음 보 는 기능 1. 우 리 는 다음 과 같은 생각 이 있 습 니 다.

구조 함 수 를 만 듭 니 다. 원형 방법 은 get (get 요청 보 내기), success (마 운 트 성공 함수 리 셋), error (마 운 트 실패 함수 리 셋) 가 있 습 니 다.

이 구조 함 수 는 원형 대상 이 있어 서 성공 과 실패 의 반전 함 수 를 각각 저장 합 니 다.

get 요청 에서 ajax 를 보 내 고 원형 대상 의 성공 과 실패 반전 함 수 를 순서대로 실행 합 니 다.

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;
    $.ajax({
        url: url,
        type: 'get',
        timeout: 5000,
        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;
};

그리고 우 리 는 실행 할 수 있다.

let successCallback1 = (data, status) => {
    console.log(data);
}

let successCallback2 = (data, status) => {
    console.log(data);
}

let errorCallback1 = (err, status) => {
    console.log(data);
}

let errorCallback2 = (err, status) => {
    console.log(data);
}

let url = 'xxxxxxxxxx';
let promise = new Promise();
promise.success(successCallback1)
       .error(errorCallback1)
       .error(errorCallback2)
       .success(successCallback2)
       .get(url);

그러나 이 는 get 방법 이 마지막 에 만 호출 되 고 앞 에 언급 할 수 없다 는 단점 이 있다.
어떻게 앞에서 언급 하여 아래 의 호출 형식 으로 바 꿉 니까?

promise.get(url)
       .success(successCallback1)
       .error(errorCallback1)
       .error(errorCallback2)
       .success(successCallback2);

사 고 는 setTimeout 을 사용 할 수 있 습 니 다. 테스트 코드 는 다음 과 같 습 니 다.

var Haha = function() {
    this.a = [];
};

Haha.prototype.go = function() {
    setTimeout(() => {
        this.a.push(1);
        let that = this;
        setTimeout(() => {
            that.a.push(2);
        });
    });
    return this;
};

Haha.prototype.push = function(ele) {
    this.a.push(ele);
    return this;
};

var yaya = new Haha();

yaya.go().push(3).push(4);
//         yaya.a，      [3, 4, 1, 2]

그래서 유사 한 것 은 get 방법 을 다음 과 같이 수정 할 수 있 습 니 다.

Promise.prototype.get = function() {
    setTimeout(() => {
        let that = this;
        $.ajax({
            url: myUrl,
            type: 'get',
            timeout: 5000,
            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);
                    }
                }
            }
        });
    }, 0);
    return this;
}

눈대중 이 가능 하 니 나중에 시간 을 내 서 테스트 해 보 자.
다음으로 전송:https://www.cnblogs.com/yangzhou33/p/9961097.html