vue에서 wait의 사용법은 무엇입니까?

vue에서 wait는 비동기 함수에만 배치할 수 있습니다. async와 함께 사용하는 것은 비동기 함수를 대기로 전환하는 것과 동일하며 다음 표현식의 반환 결과를 기다립니다. 다음 단계로.

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vue에서 wait의 사용법은 무엇입니까

먼저 async의 사용법에 대해 이야기해 보겠습니다. async는 함수가 비동기 함수임을 나타내는 키워드로 함수 앞에 배치됩니다. 왜냐하면 async는 비동기를 의미하기 때문입니다. 함수는 또한 함수 실행이 다음 코드의 실행을 차단하지 않는다는 것을 의미합니다. 비동기 함수 작성하기

async function timeout() {
　　return 'hello world';
}

　구문은 매우 간단합니다. 함수 앞에 async 키워드를 추가하면 함수가 비동기임을 나타냅니다. 비동기 함수도 함수입니다. 일반적으로 함수를 사용하는 방식으로 사용합니다. 뒤에 있는 코드 실행을 차단하지 않는다는 것을 보여주기 위해 뒤에

console.log;
async function timeout() {
    return 'hello world'
}
timeout();
console.log('虽然在后面，但是我先执行');

문장을 추가합니다. 비동기 함수 호출을 엽니다.

　async 함수 timeout이 호출되었지만 출력이 없습니다. 걱정하지 마세요. timeout() 실행이 반환되는 것을 살펴보세요. ? 위의 timeout() 문을 console.log(timeout())

async function timeout() {
    return 'hello world'
}
console.log(timeout());
console.log('虽然在后面，但是我先执行');

로 변경하세요. 계속해서 콘솔을 살펴보세요

Promise 반환을 얻으려면 비동기 함수가 Promise 개체를 반환하는 것으로 나타났습니다. 값을 사용하려면 then 메소드를 사용해야 하며 계속해서 코드를 수정해야 합니다

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('虽然在后面，但是我先执行');

콘솔을 보면

"hello world'가 표시되고 타임아웃 실행으로 인해 후속 코드 실행이 차단되지 않았으며 이는 일관됩니다. 방금 말한 내용입니다.

이제 콘솔에서 Promise가 해결되었음을 알 수 있습니다. 이는 비동기 함수가 호출될 때 값을 반환하는 내부 구현 원칙입니다. Promise.solve() 메소드가 내부적으로 호출되어 Promise 객체로 변환됩니다. 그러나 timeout 함수 내에서 오류가 발생하면 Promise.reject()가 호출되어 Promise 객체가 반환됩니다. 타임아웃 함수 수정

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
    }
}
console.log(timeout(true))  // 调用Promise.resolve() 返回promise 对象。
console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

　콘솔은 다음과 같습니다.

　오류가 발생하면 Promise 객체에는 이를 잡는 catch 메소드가 있습니다.

timeout(false).catch(err => {
    console.log(err)
})

　async 키워드가 거의 다 왔습니다. wait 키워드는 대기를 의미하므로 뒤에 오는 것은 무엇입니까? 표현식을 넣지만 약속 객체를 반환하는 표현식을 넣을 가능성이 더 높습니다. async function

　이제 이 함수의 함수는 2s입니다. 그런 다음 그 값에 2

// 2s 之后返回双倍的值

function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}

를 곱하면, 그 뒤에 있는 것을 사용할 수 있습니다. wait는 promise 객체를 반환하는 표현식이므로 그 뒤에 doubleAfter2seconds 함수 호출을 작성할 수 있습니다.

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}
testResult();

Open 콘솔은 2s 이후에 60을 출력합니다.

이제 코드의 실행 과정을 살펴보고 testResult 함수를 호출합니다. Await는 잠시 기다리라는 의미입니다. 코드가 여기서 일시 중지되고 더 이상 실행되지 않습니다. 다음 Promise 객체가 실행될 때까지 기다리세요. 반환 값을 얻은 후 계속해서 아래쪽으로 실행됩니다. wait가 발생하면 코드는 실행을 일시 중지하고 doubleAfter2seconds(30)가 실행을 완료할 때까지 기다린 후 doubleAfter2seconds(30)에서 반환된 Promise가 실행되기 시작합니다. 2초 후 Promise가 해결되어 60의 값을 반환합니다. 이때 Wait는 60의 반환 값을 얻은 다음 이를 result에 할당하고 일시 중지합니다. 마지막에는 코드가 계속 실행되기 시작합니다. console.log 문.

　이 함수를 사용하면 async/await의 역할을 볼 수 없습니다. 3개 숫자의 값을 계산한 후 얻은 값을 출력하고 싶다면 어떻게 해야 할까요?

async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}

6초 후 콘솔에 220이 출력됩니다. 비동기 코드 작성이 동기 코드 작성과 동일하며 더 이상 콜백 영역이 없음을 알 수 있습니다.

참고:

async 및 대기는 약속을 기반으로 합니다. 비동기를 사용하는 함수는 항상 Promise 객체를 반환합니다. 이는 실수를 저지르는 흔한 장소일 수 있다는 점을 기억하는 것이 중요합니다.

await를 사용할 때 전체 코드가 아닌 기능을 일시 중지합니다.

async 및 wait는 비차단입니다.

Promise.all()과 같은 Promise를 계속 사용할 수 있습니다.

【관련 추천: "vue.js tutorial"】

위 내용은 vue에서 wait의 사용법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!