ES7 의 Async/await 사용 에 대한 상세 한 설명

js 비동기 가 데 이 터 를 요청 할 때 보통 우 리 는 리 셋 함수 로 해결 합 니 다.그러나 여러 개의 리 셋 함수 가 내장 되 어 있 을 때 코드 가 우아 하지 않 고 유지 비용 도 상응 하 게 높 습 니 다.ES6 가 제공 하 는 Promise 방법 과 ES7 이 제공 하 는 Async/Await 문법 사탕 은 다 층 반전 문 제 를 잘 해결 할 수 있다.
Promise 대상 은 비동기 작업 의 최종 상태(완료 또는 실패)와 되 돌아 오 는 값 을 표시 하 는 데 사 용 됩 니 다.
await 조작 자 는 Promise 대상 을 기다 리 는 데 사 용 됩 니 다.그것 은 비동기 함수 async function 에서 만 사용 할 수 있 습 니 다.
await 표현 식 은 현재 async function 의 실행 을 중단 하고 Promise 처리 가 끝 날 때 까지 기 다 립 니 다.Promise 가 정상적으로 처리(fulfilled)되면 리 셋 된 resolve 함수 인 자 는 await 표현 식 의 값 으로 async function 을 계속 실행 합 니 다.
ajax 요청 시
보통 ajax 요청 데 이 터 를 사용 할 때

$.ajax({
 url: 'data1.json',
 type: 'GET',
 success: function (res) {
  console.log(res) //     ，     res
 },
 error: function(err) {
  console.log(err)
 }
})

위 에서 우리 가 원 하 는 결 과 를 얻 을 수 있 습 니 다 res---{"url":"data2.json"}
여러 ajax 요청 시
그러나 얻 은 데이터 res 가 다른 ajax 요청 에 사용 해 야 할 때 다음 과 같은 쓰기 가 필요 합 니 다.

$.ajax({
 url: 'data1.json',
 type: 'GET',
 success: function (res) {
  $.ajax({
   url: res.url, //      ajax       res      ajax  
   type: 'GET',
   success: function (res) {
    $.ajax({
     url: res.url, //     ajax       res      ajax  
     type: 'GET',
     success: function (res) {
      console.log(res) // {url: "this is data3.json"}
     },
     error: function(err) {
      console.log(err)
     }
    })
   },
   error: function(err) {
    console.log(err)
   }
  })
 },
 error: function(err) {
  console.log(err)
 }
})

위 에 여러 개의 반전 함수 가 내장 되 어 있어 가 독성 이 떨 어 집 니 다.(이러한 내장 은 일반적인 개발 에 서 는 드 물 지만 node 서버 에서 개발 할 때 는 흔 합 니 다)
최적화 방법
promise 체인 조작 사용 하기
다음 과 같이 Promise 를 사용 하여 체인 조작 을 하면 위의 비동기 코드 를 동기 화 처럼 쉽게 읽 고 지옥 에서 벗 어 날 수 있 습 니 다.

function ajaxGet (url) {
 return new Promise(function (resolve, reject) {
  $.ajax({
   url: url,
   type: 'GET',
   success: function (res) {
    resolve(res);
   },
   error: function(err) {
    reject('    ');
   }
  })
 })
};

ajaxGet('data1.json').then((d) => {
 console.log(d);  // {url: "data2.json"}
 return ajaxGet(d.url);
}).then((d) => {
 console.log(d);  // {url: "data3.json"}
 return ajaxGet(d.url);
}).then((d) => {
 console.log(d);  // {url: "this is data3.json"}
})

Async/await 방법

async 는 이것 이 async 함수,즉 비동기 함수 임 을 나타 내 며,await 는 이 함수 에 만 사용 할 수 있 습 니 다.

await 는 promise 가 결 과 를 되 돌려 주 기 를 기다 리 고 있다 고 밝 혔 다.

await 뒤에 따 르 는 것 은 promise 대상 일 것 입 니 다.(물론 다른 반환 값 도 괜 찮 습 니 다.바로 실행 할 것 입 니 다.하지만 그러면 의미 가 없습니다.)

await 조작 부 호 는 Promise 대상 을 기다 리 는 데 사 용 됩 니 다.비동기 함수 async function 에서 만 사용 할 수 있 습 니 다.4567918)

await 가 기다 리 는 것 은 promise 대상 이지 만.then(..)을 쓰 지 않 아 도 되 돌아 오 는 값 을 얻 을 수 있 습 니 다.

ajax 요청 을 실행 하려 면 다음 과 같은 방법 을 사용 할 수 있 습 니 다.

function ajaxGet (url) {
 return new Promise(function (resolve, reject) {
  $.ajax({
   url: url,
   type: 'GET',
   success: function (res) {
    resolve(res)
   },
   error: function(err) {
    reject('    ')
   }
  })
 })
};

async function getDate() {
 console.log('  ')
 let result1 = await ajaxGet('data1.json');
 console.log('result1 ---> ', result1); // result1 ---> {url: "data2.json"}
};
getDate();  //         

여러 ajax 요청 을 실행 할 때:

function ajaxGet (url) {
 return new Promise(function (resolve, reject) {
  $.ajax({
   url: url,
   type: 'GET',
   success: function (res) {
    resolve(res)
   },
   error: function(err) {
    reject('    ')
   }
  })
 })
};

async function getDate() {
 console.log('  ')
 let result1 = await ajaxGet('data1.json');
 let result2 = await ajaxGet(result1.url);
 let result3 = await ajaxGet(result2.url);
 console.log('result1 ---> ', result1); // result1 ---> {url: "data2.json"}
 console.log('result2 ---> ', result2); // result2 ---> {url: "data3.json"}
 console.log('result3 ---> ', result3); // result3 ---> {url: "this is data3.json"}
};

getDate(); //         

async 대기 캡 처 오류:
async await 에서.then(..)은 쓰 지 않 아 도 됩 니 다.그러면.catch(..)도 쓰 지 않 고 표준 try catch 문법 으로 오 류 를 직접 포착 할 수 있 습 니 다.
예 를 들 어 아래 url 을 잘못 썼 다 면

function ajaxGet (url) {
 return new Promise(function (resolve, reject) {
  $.ajax({
   url: url111, //        url
   type: 'GET',
   success: function (res) {
    resolve(res)
   },
   error: function(err) {
    reject('    ')
   }
  })
 })
};


async function getDate() {
 console.log('  ')
 try {
  let result1 = await ajaxGet('data1.json'); //        ，       catch()   
  let result2 = await ajaxGet(result1.url);
  let result3 = await ajaxGet(result2.url);
  console.log('result1 ---> ', result1);
  console.log('result2 ---> ', result2);
  console.log('result3 ---> ', result3);

 } catch(err) {
  console.log(err) // ReferenceError: url111 is not defined
 }
};

getDate(); //         

소스 코드
원본 코드살펴보다
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.