ajax(),Promise 입문

ajax(),Promise 입문
1.반전 이 뭐 예요?
call a functioncall a function back
callback
여기 봐:Callback(리 턴)이 뭐야?항 저 우(杭 州)에 가서 야 알 겠 는가?
callback 은 특수 한 함수 입 니 다.
이 함 수 는 매개 변수 로 다른 함수 에 호출 되 었 다.이런 함 수 는 바로 반전 함수 다.
1.1 반전 예
Callback 은 흔히 볼 수 있 습 니 다$button.on('click', function(){})click 뒤의 function 은 바로 반전 입 니 다.'나'는 이 함 수 를 호출 한 적 이 없 기 때문에 jQuery 가 사용자 가 button 을 클릭 할 때 호출 한 것 입 니 다(사용자 가 클릭 한 후에 이 함수 가 실 행 됩 니 다.지금 은 하나의 매개 변수 만 전 달 했 을 뿐 이 매개 변 수 는 클릭 한 후에 실 행 될 함수 입 니 다).div.addEventListener('click', function(){})click 뒤의 function 도 반전 입 니 다.'나'는 이 함 수 를 호출 한 적 이 없 기 때문에 브 라 우 저가 사용자 가 button 을 클릭 할 때 호출 합 니 다.
일반적으로 매개 변수 가 하나의 함수 라면 이 함 수 는 반전 이다.
제 가 쓴 봉 투 를 보 세 요.간단 한 jQuery.ajax()중의successFN는 바로 반전 함수 입 니 다.
요청 이 성공 하고 응답 을 받 았 을 때 만 이 success 함 수 를 실행 할 수 있 습 니 다.이것 이 바로 리 셋 입 니 다.함 수 를 매개 변수 로 전달 하지만 실행 하지 않 습 니 다.다른 함수 로 호출 하 는 것 이 리 셋 함수 입 니 다.
1,2 콜 백 은 약간 역 직감 적 이 야.
콜백 은 약간'반 직각'이 있다.예 를 들 어 우 리 는 코드 로 한 가지 일 을 하 는데 두 단계 로 나 뉜 다.step 1()과 step 2().
인간 의 직감 에 맞 는 코드 는:
step 1()step 2()callback 의 작성 방법 은 다음 과 같 습 니 다.
step 1(step 2)왜 이렇게 써 요?아니면 어떤 상황 에서 이'반 직각'의 표기 법 을 써 야 합 니까?
보통 step 1 이 비동기 작업 일 때 콜백 을 사용 합 니 다.
비동기 미 션 이 뭐 죠?
2.비동기 란 무엇 인가?
'매일 한 문제'는 무엇이 비동기 입 니까?방 응 항 은 다음 블 로 그 를 알 고 다시 상세 하 게 기록 합 시다.
3.$.Ajax()Promise 는 무엇 입 니까?어떻게 사용 합 니까?
'매일 한 문제'Promise 가 뭐 예요?
코드 여기 있어 요.
3.1$.ajax()의 promise
promise 를 사용 하지 않 으 면$.ajax 가 요청 할 때 성공 하고 실패 한 반전 함 수 는 매개 변수 에 적 혀 있 습 니 다.그 는 대상 매개 변수의 값 입 니 다.

$.ajax({
        method:"post",
        url:"/xxx",
        data:"username=mtt&password=1",
        dataType:'json',
        success:()=>{}//        
        error:()=>{}//        
    }
    )

jQuery.axja()를 사용 하여 요청 을 보 내 고 promise 를 사용 하면 코드 는 다음 과 같 습 니 다.

let myButton = document.getElementById('myButton');

function success(responseText){
    console.log("  ")
    console.log(responseText);//responseTex
}
function fail(request){
    console.log("  ")
    console.log(request);
}
myButton.addEventListener("click",(e)=>{
    //  ajax
    $.ajax({
        method:"post",
        url:"/xxx",
        data:"username=mtt&password=1",
        dataType:'json'//            ,    ,        
    }
    ).then(success,fail)//$.ajax()    promise
})

성공 의 결과:
존재 하지 않 는 주소 로 바 꾸 기/mtt실패 한 결과$.ajax()함 수 는 promise 를 되 돌려 주 고 그 다음.then(success,fail)에 성공 하면 첫 번 째 매개 변수 에 있 는 함수 인 success 함 수 를 호출 합 니 다.실패 하면 두 번 째 매개 변수의 함수 인 fail 함 수 를 호출 합 니 다.
3.1.1 promise 의 첫 번 째 의미
promise 의 첫 번 째 의미:성공 과 실패 가 성공 인지,successFN 인지,fail 인지,error 인지 기억 할 필요 가 없습니다.함수 이름 을 기억 할 필요 가 없습니다.성공 이 첫 번 째 매개 변수 인지,실패 할 때 두 번 째 매개 변수 인지 만 알 아야 합 니 다.예 를 들 어 이렇게 쓰 십시오.

 //  ajax
    $.ajax({
        method:"post",
        url:"/xxx",
        data:"username=mtt&password=1",
        dataType:'json'//            ,    ,        
    }
    ).then((responseText)=>{console.log(responseText)},()=>{console.log("  ")})//$.ajax()    promise

함수 명 을 쓸 필요 가 전혀 없습니다.
3.1.2 promise 의 두 번 째 의미
만약 당신 이 하나의 결 과 를 여러 번 처리 해 야 한다 면 이렇게 쓸 수 있 습 니 다.

$.ajax({
        method:"post",
        url:"/xxx",
        data:"username=mtt&password=1",
        dataType:'json'//            ,    ,        
    }
    ).then((responseText)=>{
        console.log(responseText)
        return responseText;//            ,    return,   then      return   
    },()=>{
        console.log("  ")
    }).then(//     then
        (   return   )=>{
            console.log("     ")
            console.log(   return   )
        },
        ()=>{
            //         
        }
    )

결과:두 번 째 then 의 함 수 를 보 세 요.첫 번 째 then 에서 return 의 결 과 를 매개 변수 로 계속 처리 합 니 다.그래서 promise 의 장점 은 두 가지 함수,즉 결 과 를 다시 처리 하려 면 then 다시 한 번 이름 을 지 을 필요 가 없습니다 then 의 중국어 의미:그리고!
이상 은 ajax 에서 promise 를 간단하게 사용 하 는 것 입 니 다.어떻게 스스로 포장 합 니까?
PS: ajax()함수 매개 변수 에 있 는dataType:'json'// , , 즉:
ajax 방법 중의 dataType:예상 서버 가 되 돌아 오 는 데이터 형식 입 니 다.지정 하지 않 으 면 jQuery 는 자동 으로 HTTP 패키지 MIME 정보 에 따라 스마트 하 게 판단 합 니 다.
4.$.ajax()와 유사 한 Promise 의 간단 한 버 전(털,나중에 깊이 들 어가 기)을 패키지 합 니 다.
다음은 우리 가 봉 인 된 jQuery.Ajax()코드 로 돌아 갑 니 다.우 리 는 이 를 바탕 으로 promise 를 계속 봉 인 했 습 니 다.
예전 에 포 장 된 코드 는 여기 서도 제 이전 블 로 그 를 볼 수 있 습 니 다.그 안에 Ajax()를 어떻게 포장 하 는 방법 과 상세 한 과정 이 있 습 니까?
원래 패키지 Ajax()코드 핵심 부분:

window.jQuery.ajax = ({method,path,body,successFn,failFn,headers})=>{//ES6  
    
    let request = new XMLHttpRequest();
    request.open(method,path);//  

    for (const key in headers) {//  header,     
    let value = headers[key];
        request.setRequestHeader(key,value);
    }
    request.send(body);//  ,      

    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            if ( request.status>=200&&request.status<=400){
                successFn.call(undefined,request.responseText);//      
            }else if(request.status>=400){
                failFn.call(undefined,request);//      
            }
    }
    }
}

4.1 봉인 시작
패키지 후의 전체 코드

window.jQuery.ajax = ({method,path,body,headers})=>{//ES6  
   //  Promise  
    return new Promise((resolve,reject)=>{//      ,  
        let request = new XMLHttpRequest();
        request.open(method,path);//  

        for (const key in headers) {//  header,     
            let value = headers[key];
            request.setRequestHeader(key,value);
        }
        request.send(body);//  ,      

        request.onreadystatechange = ()=>{
            if(request.readyState ===4){
                if ( request.status>=200&&request.status<=400){
                    resolve.call(undefined,request.responseText);//      
                }else if(request.status>=400){
                    reject.call(undefined,request);//      
                }
            }
        }
    })
}

return하나new Promise().첫 번 째 로 기억 해 야 할 것:이것Promise은 하나의 함 수 를 받 아야 합 니 다.함수 안에 해 야 할 일(즉,요청 을 보 내 고 Ajax 요청)입 니 다.일반적으로 모든 것 을 안에 두 고 첫 번 째 문장 은return입 니 다.그리고 해 야 할 일 을 안에 두 어야 합 니 다.두 번 째 로 기억 해 야 할 것:Promise 가 받 은 이 함 수 는 두 개의 인자 가 있 습 니 다.하 나 는resolve라 고 합 니 다.하 나 는reject앞의 두 가지 기억 해 야 할 것 은 바로

return new Promise((resolve, reject) => {
        //    
    });

세 번 째 기억 해 야 할 것:성공 하면 조절resolve()하고 실패 하면 호출reject()하기 때문에Ajax()매개 변수 중successFn과failFn이 필요 하지 않 으 며 성공 행 과 실패 행 에 대응 하 는 코드 를 각각resolve.call(undefined,request.responseText);// 과reject.call(undefined,request);// 로 바 꿉 니 다.
위 에는 고정된 포장 이 끝 났 습 니 다.이 몇 줄 의 코드 만 각각 수정 되 었 습 니 다.
4.2 어떻게 호출

myButton.addEventListener("click",(e)=>{
    //  ajax
    $.ajax({
        method:"post",
        path:"/xxx",
        body:"username=mtt&password=1",
        headers:{
            "content-type":'application/x-www-form-urlencoded',
            "mataotao":18
        }
    }).then(
        (responseText)=>{console.log(responseText);},//         
        (request)=>{console.log(request);}//         
    )
})

ajax()함수 후 연결.then(),성공 하면 호출then()함수 첫 번 째 매개 변수 에서 의 함수,실패 하면 호출then()함수 두 번 째 매개 변수 에서 의 함수
간단 한 Promise 원리:
자신 이 봉 인 된 Ajax()는 new 에서 나 온 Promise 대상,Promise 인 스 턴 스 를 되 돌려 줍 니 다.이 Promise 인 스 턴 스 는 then 속성 이 있 습 니 다.그 는 함수 이기 때문에 then()을 호출 할 수 있 습 니 다.그리고 then 도 Promise 대상 을 되 돌려 줍 니 다.
Promise 는 함수 하 나 를 받 습 니 다.이 함수 가 바로 당신 이 해 야 할 일 입 니 다.
그래서 Promise 는 본질 적 으로 하나의 형식 만 규정 하고 있 습 니 다!
5 Promise 총화
이 코드 외 워 주세요.
Promise 용법

function xxx(){
    return new Promise((f1, f2) => {
        doSomething()
        setTimeout(()=>{
            //       f1，      f2
        },3000)
    })
}

xxx().then(success, fail)

//     
xxx().then(success, fail).then(success, fail)

15 줄 코드 로 Promise 알 아 줄 게.-방탕아 글.-알 지?