js 처리 비동기 콜백, Promise, async + await 세 가지 방식

1305 단어 JavaScript
javascript 처리 비동기 의 세 가지 방식 에 대한 간단 한 소개
// 1、        
// callback     
function ajax(fn) {
    setTimeout(() => {
        console.log('  ')
        fn()
    }, 1000)
}
ajax(() => {
    console.log('    ')
})
//           
//        
ajax(() => {
    console.log('         ')
    ajax(() => {
        console.log('         ')
        ajax(() => {
            console.log('         ')
        })
    })
})

// 2、es6 Promise  
function delay(word) {
    return new Promise((resolve, reject)=> {
        setTimeout(() => {
            resolve(word)
        }, 2000)
    })
}
//   promise
delay('  ')
    .then(res => {
        console.log(res)
        return delay('  ')
    })
    .then(res => {
        console.log(res)
        return delay('  ')
    })
    .then(res => {
        console.log(res)
    })


// delay    
//    async + await  !!! async    await    
async function start() {
    // await    async            
    const wrod1 = await delay('   ')
    console.log(wrod1)
    const wrod2 = await delay('   ')
    console.log(wrod2)
    const wrod3 = await delay('   ')
    console.log(wrod3)
}
start()

복사 해서 바로 Node 로 실행 해서 결 과 를 볼 수 있 습 니 다.

좋은 웹페이지 즐겨찾기