어떻게 프로미스로 리셋과 비동기화를 해결합니까

일단 다음 문제 뭘 출력하는지 볼까요?

setTimeout(function() {
      console.log(1);
},1000)
console.log(2);

우리가 얻은 결과는 먼저 2를 출력하고 나중에 1을 출력하는 것이다.이게 무슨 이유죠?타이머가 비동기적이라는 것은 모두가 알고 있을 것이다.그래서 먼저 2를 출력합니다.그럼 우리의 수요가 왔는데 어떻게 먼저 1을 출력하고 2를 출력합니까?

function foo(callback) {
setTimeout(function() {
    console.log(1);
    callback();
},1000)
}
foo(function() {
      console.log(2);
})

이제 인쇄된 결과를 봅시다. 과연 먼저 출력한 1, 그리고 2를 출력했습니다.이것은 리셋 함수를 통해 해결된 것이다.이제 우리 당신의 요구가 바뀌었습니다. 우리는 1초 간격으로 출력을 합니다.

function foo(callback) {
    setTimeout(function() {
        console.log('1 ');
        callback()
    }, 1000)
}
foo(function() {
    console.log(' ');
    foo(function() {
        console.log(' ');
        foo(function() {
            console.log(' ');
        })
    })
})

이렇게 하면 우리의 문제를 해결할 수 있지 않을까요?
네, 그런데 저희가 몇 번 더 오면 리셋이 너무 많은 거 아시죠?이것이 바로 모두가 말한 지옥을 파괴하는 것이다.

그래서 ES6는 우리에게 지옥을 파괴하는 방법을 제공했다:promise;

promise는 비동기적인 방식으로 값을 처리하는 방법입니다.promise는 하나의 대상으로 층층이 끼워 넣는 문제를 해결합니다

promise 객체의 상태:

진행 중:pending 성공:resovled 실패:rejected
promise 객체의 방법:
then () 성공 후 실행;만약 두 개의 매개 변수가 있다면: 첫 번째 매개 변수가 성공한 후에 실행하고, 두 번째 매개 변수가 실패한 후에 실행한다.catch () 실패 후 실행;사람 promise all ([]).then () 모두 성공한 후 그림 then을 실행하는 첫 번째 방법;promise.race[(p1,p2,p3,---)]] 먼저 상태를 바꾸면promise는 대응하는 상태를 실행합니다

var promise = new Promise(function (resolved, rejected) {
    resolved('ok'); 
    rejected('no');
    // , ;( ， )
});
promise.then(function(msg) {
    console.log('ok：' + msg);
},function (msg) {
    console.log('no：' + msg);
});

인쇄 결과: ok: ok 지금 우리는 연습을 하나 합니다:promise를 사용하여 그림을 불러옵니다.불러오는 데 성공하면 그림을 body에 불러옵니다. 불러오는 데 실패하면 알림이 실패합니다.

var promise = new Promise(function (resolved, rejected) {
    var img = document.createElement('img');
    img.src = './img/1.png';
    img.onload = function () {
        resolved(img)   // resolved(）
    }
    img.onerror = function () {
        rejected(' ')    // rejected(）
    }
})
promise.then(function (msg) {
    document.body.appendChild(msg)
},function (msg) {
    alert(msg)
})

어때요, promise에 대해서 잘 아시죠?그렇다면 어떻게 프로미스로 비동기적인 문제를 해결합니까?우리는 1초 간격으로 출력을 한다.

    var promise = new Promise(function(resolved, rejected) {
        setTimeout(function() {
            console.log(' ');
            resolved()
        }, 1000)
    });
    return promise;
}
fn().then(function() {
    console.log(' ');
    return fn()
}).then(function() {
    console.log(' ');
    return fn()
}).then(function () {
    console.log(' ');
})

그럼 Promise는 aax 리셋 문제를 어떻게 해결합니까?우리 계속 아래를 봅시다.

function ajaxPromise(url) {
    var promise = new Promise(function(resolved, rejected) {
        var xhr = new XMLHttpRequest();
        xhr.open('get', url);
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resolved( xhr.responseText);   // promise 
            }
        }
        setTimeout(function () {//5 
            rejected('error')  // promise 
        },5000)
    })
    return promise;
}
document.onclick = function () {
    var pro = ajaxPromise('data.json');
    pro.then(function (msg) {
        alert(msg)   // , 
    },function (msg) {
        alert(msg)  // error
    })
}