최고의 비동기식 솔루션 Async-await

14190 단어 프런트엔드

정의

Async function 선언은 AsyncFunction 객체를 반환하는 비동기 함수를 정의하는 데 사용됩니다.비동기 함수는 이벤트를 통해 비동기적으로 실행되는 함수를 가리키며, 은식Promise을 통해 결과를 되돌려줍니다.
function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}
 
async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: 'resolved'
}
 
asyncCall();

설명:

Async 함수를 호출할 때 Promise 대상을 되돌려줍니다.Async가 값을 되돌릴 때Promiseresolve 방법은 이 값을 전달하는 것을 책임진다(전문에 대응하는 프로미스 대상을 되돌려준다). Async 함수가 이상을 던질 때Promisereject 방법도 이 이상을 전달한다.

await

async 함수에는 await 표현식이 있을 수 있습니다. 이로써 async 함수는 실행을 멈추고 표현식Promise의 실행이 끝난 후에야 계속 실행async 함수를 실행하고 해결 결과를 되돌려줍니다.
* await 키워드는 async 함수에서만 사용할 수 있습니다.
var resolveAfter1Second = function() {
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(10);
      console.log("fakin ");
    }, 1000);
  });
};  
var sequentialStart = async function() {
    const fast = await resolveAfter1Second();
    console.log(fast)
}
 
sequentialStart()

설명: 먼저 일반적인 resolveAfter1Second 함수를 정의했고 되돌아오는 것은 promise이다. 이 promise 내부에서 1초 후에 출력('fakin 실행 완료')을 한 다음에 sequentialStartasync 함수에서 중요한 글자를 사용하여 이 일반await 함수를 일시 정지한다.이 resolveAfter1Second 함수 코드가 async 줄에 실행될 때 전체 함수는 const fast = await resolveAfter1Second();가 실행되기를 기다리고 결과를 되돌려줍니다 resolveAfter1Second()await 고려 사항console.log(fast)await를 혼동하지 마세요. 동시Promise.then 두 개 혹은 더 많은 await 대상을 원한다면 Promise를 사용해야 합니다.

Async 진급(Promised 호출 체인 재작성)


두 함수를 먼저 정의합니다.
let _fakin = function(){
    return new Promise((resolve,reject)=>{
        setTimeOut(()=>{
            console.log('fakin')
        },1000)
        resolve(10)
    })
     
}
let _errFakin =function (){
    return new Promise((resolve,reject)=>{
        setTimeOut(()=>{
            console.log(' ')
        },1000)
        resolve(10)
    })
}

위에서 두 가지 함수를 정의했는데 각각 성공과 실패를 하나의 표준 버전Promise.then으로 되돌려준다Promise
    function fakin(){
        return new Promise((resolve,reject)=>{
              // do something  
        }).catch(e=>{
            return _fakin().then(res=>{
                 // do something  
            })
        }).then(res=>{
            return _errFakin().then(res=>{
                 // do something  
            })
        })
    }

만약 기능이 갈수록 복잡해진다면, 매우 많을 것이다 Promisethen 버전 Async
async function fakin(){
    let v;
    try{
        v= await _fakin()
    } catch(e){
        v = await _errFakin(e);
    }
    return processDataInWorker(v)// await , async Promise 
}

좋은 웹페이지 즐겨찾기