비동기 / 동기 화 처리

앞 말 을 하 다
앞 이 비교적 수 다스 러 우 니 독자 들 이 인내심 을 가지 고 다 보 기 를 바란다.async / await 는 흔히 말 하 는 것 이 라 고 할 수 있 지만 모든 전단 엔지니어 들 은 피 할 수 없 는 화 제 를 피 할 수 없다.JQuery 의 북 시대 에 다음 과 같은 요 구 를 만나면 어떻게 하 시 겠 습 니까?수요: 첫 번 째 ajax 요청 성 을 받 고 성 데이터 요청 두 번 째 ajax 를 받 아 시의 데 이 터 를 얻 고 시의 데 이 터 를 받 아 세 번 째 ajax 를 요청 하여 지역 의 데 이 터 를 얻 습 니 다.
가장 흔히 볼 수 있 는 서법 은 두 가지 이다. 1. 지옥 식 서법 을 되 돌려 쓰 는 것 이다.

$.ajax({
        url:'url1',
        type:'post',
        async: true,
        data:{
            list:0
        },
        success(province){
            $.ajax({
                url:'url2',
                type:'post',
                async: true,
                data:{
                    province:province
                },
                success(city){
                    $.ajax({
                        url:'url3',
                        type:'post',
                        async: true,
                        data:{
                            city:city
                        },
                        success(area){
                            console.log('         ')
                        }
                    })
                }
            })
        }
    })

미 치 겠 네.
아니면 이렇게?동기 화 요청

 var province,city,area
    $.ajax({
        url:'url1',
        type:'post',
        async: false,
        data:{
            list:0
        },
        success(province){
            province = province
        }
    })
    $.ajax({
        url:'url2',
        type:'post',
        async: false,
        data:{
            province:province
        },
        success(city){
            city = city
        }
    })
    $.ajax({
        url:'url3',
        type:'post',
        async: false,
        data:{
            city:city
        },
        success(area){
            console.log('         ')
        }
    })

나 는 데이터 하나 가 페이지 로 돌아 오지 않 으 면 송아지 가 된다 고 믿는다.이것 은 정말 악몽 이다.
웃 지 마라, 나 는 전단 엔지니어 로 서 반드시 이렇게 썼 을 것 이 라 고 믿는다.
어느 날 까지 vue 에 Jquery 가 없고 promise 기반 으로 쓴 axios 만 있 는 것 을 발 견 했 습 니 다.
처음에 axios 를 사용 할 때 동기 화 요청 을 해 야 하 는 사상 에서 벗 어 나 지 못 해 vue 프로젝트 에 jquery 를 도입 하여 프로젝트 를 4 가지 로 만 들 었 습 니 다.
오랫동안 연구 한 끝 에, 마침내 async / await 를 발견 하 였 다.
본문
async
비동기async 키 워드 는 보통 function 앞 에 놓 고 비동기 함 수 를 표시 합 니 다.아래 와 같다

async function say() {
        return 'hi'
    }

완 일 봉 es6 튜 토리 얼 에 따 르 면 async 부분 에 대한 소개 에 따 르 면 async 가 Promise 대상 으로 돌아 갈 것 이라는 것 을 알 수 있다.그래서 우 리 는 then 을 통 해 호출 할 수 있다.

    async function say() {
        return 'hi'
    }
    say().then(value => {
        console.log(value)
    })
    console.log('    ，      ')

만약 잘 모른다 면, 내 가 이렇게 쓰 면 너 는 반드시 알 것 이다.

    function say() {
        return new Promise(resolve => {
            resolve('hi')
        })
    }
    say().then(value => {
        console.log(value)
    })
    console.log('    ，      ')

await
단어 면 의 뜻 은 '기다 림' 입 니 다. async 함수 에 만 나타 납 니 다. 여기까지 실 행 될 때 잠시 만 요.그 뒤 에는 모든 표현 식 과 함께 사용 할 수 있 지만, 일반적으로 Promise 와 함께 비동기 함수 가 동기 화 되 는 효 과 를 실현 할 수 있 습 니 다.

    function delay(time,message){
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(message)
            },time)
        })
    }

    async function say() {
        let a = await delay(5000,'   ')
        console.log(a)
        let b = await delay(4000,'   ')
        console.log(b)
    }
    say()

delay 는 비동기 함수 입 니 다. 정상 적 인 상황 에서 이렇게 쓰 면:

    setTimeout(()=>{
        console.log('1')
    },5000)

    setTimeout(()=>{
        console.log('2')
    },4000)

먼저 2 를 출력 하고 1 초 후에 1 을 출력 합 니 다.
그러나 await 의 영향 을 받 아 함 수 는 5 초 후에 a 를 출력 하고 4 초 후에 b 를 출력 합 니 다.
화 제 는 우리 가 처음에 말 했 던 ajax 로 돌아 가 async / await 방법 으로 쓰 면 훨씬 우아 해 지지 않 을까요?
vue 에서 저 희 는 axios 를 사용 하여 배경 과 데이터 교 류 를 할 것 입 니 다. axios 는 동기 화 요청 이 없고 비동기 요청 만 있 기 때문에 async / await 를 사용 하여 동기 화 요청 을 모 의 하여 기능 을 실현 할 수 있 습 니 다.