비동기 프로 그래 밍 의 여섯 가지 방식 을 총 결 하 다.

비동기 프로 그래 밍
자 바스 크 립 트 는 작업 으로 알려 져 있 습 니 다. 즉, 하나의 스 크 립 트 가 실 행 된 후에 만 다음 스 크 립 트 를 실행 할 수 있 습 니 다. 두 스 크 립 트 는 동시에 실행 할 수 없습니다. 만약 에 어떤 스 크 립 트 가 오래 걸 리 면 뒤의 스 크 립 트 는 줄 을 서서 기 다 려 야 합 니 다. 프로그램의 실행 을 지연 시 킬 수 있 습 니 다.다음은 몇 가지 비동기 프로 그래 밍 방식 의 총 결 입 니 다. 당신 과 함께 노력 하 시기 바 랍 니 다.

리 턴 함수

사건 감청

구독 모드 게시

Promise

Generator (ES6)

async (ES7)

비동기 프로 그래 밍 전통 적 인 해결 방안: 리 셋 함수 와 이벤트 감청
초기 예제: 두 개의 함수 가 있다 고 가정 하면 f1 과 f2, f1 은 일정한 시간 이 필요 한 함수 입 니 다.

function f1() {
    setTimeout(function(){
        console.log('    f1')
    },1000)
}
function f2() {
    console.log('    f2')
}

리 턴 함수
f1 은 일정한 시간 이 필요 한 함수 이기 때문에 f2 를 f1 로 쓸 수 있 습 니 다. 동기 화 작업 을 비동기 작업 으로 바 꿀 수 있 습 니 다. f1 은 프로그램의 운행 을 막 지 않 습 니 다. f2 도 헛되이 기다 릴 필요 가 없습니다. 예 를 들 어 JQuery 의 ajax.
반전 함수 demo:

function f1(f2){
    setTimeout(function(){
        console.log('    f1')
    },1000)
    f2()
}
function f2() {
    console.log('    f2')
}

효 과 는 다음 과 같 습 니 다:
요약: 리 셋 함 수 는 실현 하기 쉽 고 이해 하기 쉽 지만 여러 번 리 셋 하면 코드 의 고도 결합 을 초래 할 수 있 습 니 다.
사건 감청
스 크 립 트 의 실행 은 코드 의 순서 에 달 려 있 지 않 고 어떤 사건 이 발생 하 느 냐 에 달 려 있 습 니 다.
사건 감청 데모

$(document).ready(function(){
     console.log('DOM    ready')
});

게시 구독 모드
게시 / 구독 모드 는 하나의 메시지 센터 를 이용 하여 게시 자 는 메시지 센터 에 메 시 지 를 발표 하고 구독 자 는 메시지 센터 에서 이 메 시 지 를 구독 합 니 다.vue 와 유사 한 부자 구성 요소 간 의 값 입 니 다.
구독 모드 데모 게시

//  done  
$('#app').on('done',function(data){
    console.log(data)
})
//    
$('#app').trigger('done,'haha')

Promise
Promise 는 실제 적 으로 하나의 대상 입 니 다. 비동기 작업 정 보 를 얻 을 수 있 습 니 다. Promise 대상 은 세 가지 상태 가 있 습 니 다. pending (진행 중), fulfilled (성공), rejected (실패) 입 니 다.Promise 의 상태 가 바 뀌 면 어떠한 변화 도 일어나 지 않 고 리 셋 함 수 를 체인 호출 로 바 꿉 니 다.
Promise 패키지 비동기 요청 demo

export default function getMethods (url){
    return new Promise(function(resolve, reject){
        axios.get(url).then(res => {
            resolve(res)
        }).catch(err =>{
            reject(err)
        })
    })
}

getMethods('/api/xxx').then(res => {
    console.log(res)
}, err => {
    console.log(err)
})

Generator
Generator 함 수 는 하나의 상태 기 로 여러 개의 내부 상 태 를 봉인 합 니 다.Generator 함 수 를 실행 하면 리 턴 문 구 를 사용 할 때 까지 Generator 함수 내부 의 모든 상 태 를 옮 겨 다 닐 수 있 습 니 다.
형식적 으로 Generator 함 수 는 일반 함수 이지 만 두 가지 특징 이 있다.첫째, function 키워드 와 함수 명 사이 에 별표 가 있 습 니 다.둘째, 함수 체 내부 에 yield 표현 식 을 사용 하고 yield 는 실행 을 중단 하 는 태그 입 니 다.
next () 방법 은 yield 표현 식 을 만나면 다음 작업 을 중단 하고 yield 뒤에 있 는 표현 식 의 값 을 되 돌려 주 는 대상 의 value 속성 값 으로 합 니 다.
Generator 의 demo

function *generatorDemo() {
  yield 'hello';
  yield  1 + 2;
  return 'ok';
}

var demo = generatorDemo()

demo.next()   // { value: 'hello', done: false } 
demo.next()   // { value: 3, done: false } 
demo.next()   // { value: 'ok', done: ture } 
demo.next()   // { value: undefined, done: ture } 

async
async 함 수 는 Promise 대상 을 되 돌려 줍 니 다. then 방법 으로 리 셋 함 수 를 추가 할 수 있 습 니 다. async 함수 내부 return 문 구 를 되 돌려 주 는 값 은 then 방법 리 셋 함수 의 매개 변수 가 됩 니 다.함수 가 실 행 될 때 await 를 만나면 먼저 돌아 오고 비동기 작업 이 끝 날 때 까지 기 다 렸 다가 함수 체 내 뒤의 문 구 를 실행 합 니 다.
1. await 명령 뒤에 Promise 대상 을 되 돌려 줍 니 다. 실행 결 과 는 rejected 일 수 있 으 므 로 await 명령 을 try.. catch 코드 블록 에 두 는 것 이 좋 습 니 다.
async demo 1

async function demo() {
  try {
    await new Promise(function (resolve, reject) {
      // something
    });
  } catch (err) {
    console.log(err);
  }
}

demo().then(data => {
    console.log(data)  // 
})

참고 문헌https://developers.google.com...http://es6.ruanyifeng.com/