Promise 및 async / await 는 무엇 입 니까?

유자 청년.Promise 및 async / await 가 무엇 입 니까?
AJAX 의 등장 으로 브 라 우 저의 사용자 체험 이 질 적 으로 향상 되 었 습 니 다. 예전 처럼 (예 를 들 어 다음 페이지 를 보 려 면 전체 페이지 를 다시 불 러 와 야 합 니 다. AJAX 를 사용 하려 면 다음 페이지 의 데 이 터 를 부분 적 으로 불 러 와 서 DOM 을 다시 렌 더 링 해 야 합 니 다).
물론 AJAX 는 비동기 작업 으로 요청 이 성공 한 후에 반전 함 수 를 호출 합 니 다.반환 내용 을 가 져 와 야 할 때 다른 조작 을 하면 '반전 지옥' 에 빠 지기 쉽다.이 단 어 는 낯 설 지 않 고 자주 이런 상황 을 만 날 수 있다 고 믿 습 니 다. 가장 좋 은 방법 은 AJAX 매개 변수 처리, 반전 함수 에 들 어가 간단 한 포장 을 하 는 것 입 니 다.
그럼 이제 Promise 를 소개 하 겠 습 니 다. 어떤 물건 인지, 무엇 에 쓰 는 지...
Promise
공식 문서 자료
Promise 대상 은 비동기 작업 의 최종 상태 (완료 또는 실패) 와 이 비동기 작업 의 결과 값 을 표시 하 는 데 사 용 됩 니 다.
이것 은 비동기 작업 을 하 는 함수 이 고 작업 이 끝 난 후에 상태 로 돌아 가 성공 하거나 실패 한 것 이 분명 하 다.어떻게 쓰 는 지 한번 해 볼 게 요.
DEMO 1

function newPromise() {
    return new Promise((resolve, reject) => {
        resolve("   then  ");
        reject("   catch  ");
    })
}
let p = newPromise();
console.log(p);
p.catch((res) => {
    console.log(res);
}).then((res) => {
    console.log(res);
})

Promise 는 하나의 함 수 를 입력 해 야 합 니 다. 이 함 수 는 resolve, reject 두 가지 방법 을 받 습 니 다. Promise 의 prototype 에 대응 하 는 then 과 catch 입 니 다.
resolve: 성공 상 태 를 되 돌려 주 고 들 어 오 는 값 은 최종 then 방법 으로 실 행 됩 니 다.
reject: 실패 상 태 를 되 돌려 주 고 들 어 오 는 값 은 catch 방법 으로 실 행 됩 니 다.
로그 해 보 겠 습 니 다. (resolve, reject 는 앞의 것 만 실행 하기 때문에 효 과 를 보 려 면 따로 실행 해 야 합 니 다)
resolve 방법 을 실 행 했 을 때 Promise 의 then 방법 도 실 행 됐 지만 값 을 되 돌려 주지 않 았 습 니 다.
DEMO 2

function getName() {
    return new Promise((resolve, reject) => {
        let name = "Tom";
        console.log(name);
        setTimeout(function () {
            name = "Jack";
            resolve(name);
        }, 2000);
        console.log(name);
    })
}
let name = getName();
console.log(name);
name.catch((res) => {
    console.log(res);
}).then((res) => {
    console.log(res);
})

우 리 는 setTimeout 을 사용 하여 요청 을 시 뮬 레이 션 했 습 니 다. "Jack" 을 되 돌려 name 변수 에 저장 한 다음 resolve 방법 으로 "요청" 을 then 방법 에 전달 하고 log 합 니 다.
setTimeout 은 비동기 동작 이기 때문에 'Tom' 을 두 번 직접 출력 한 다음 Promise 대상 을 출력 하고 2s 이후 then 방법 을 실행 하여 'Jack' 을 출력 합 니 다. 이것 이 바로 Axios HTTP 라 이브 러 리 의 실현 원리 입 니 다.
Axios 부분 코드:

 module.exports = function xhrAdapter(config) {
   return new Promise(function dispatchXhrRequest(resolve, reject){
     ......
   });
 };

async
공식 문서 자료
async function 성명 은 AsyncFunction 대상 으로 돌아 가 는 비동기 함 수 를 정의 하 는 데 사 용 됩 니 다.비동기 함 수 는 이벤트 순환 을 통 해 비동기 로 실행 되 는 함 수 를 말 하 며, 암시 적 인 Promise 를 통 해 결 과 를 되 돌려 줍 니 다.그러나 코드 가 비동기 함 수 를 사용 하면 문법 과 구 조 는 표준 동기 함수 와 같 습 니 다.이것 은 보기 에는 좀 복잡 할 수 있 습 니 다. 간단하게 말하자면, async function 의 성명 함수 방식 은 이 함 수 를 비동기 함수 로 정의 합 니 다. 이것 은 Promise 대상 을 되 돌려 줍 니 다. 우 리 는 async 를 Promise 의 문법 사탕 으로 이해 할 수 있 습 니 다.
DEMO 3

async function asyncFun() {
    console.log("        ");
}
let fun = asyncFun();
console.log(fun);
fun.catch((res) => {
    console.log(res);
}).then((res) => {
    console.log(res);
});

asyncFun 은 Promise 대상 을 되 돌려 주 었 습 니 다. 그러나 then 방법 은 undefined 를 출력 하 였 습 니 다. 이것 은 asyncFun 방법 에서 return 이 없 기 때문에 기본적으로 undefined 로 돌아 갑 니 다.
await
공식 문서 자료
await 조작 자 는 Promise 대상 을 기다 리 는 데 사 용 됩 니 다.그것 은 비동기 함수 async function 에서 만 사용 할 수 있 습 니 다.이것 은 매우 직접적 입 니 다. Promise 대상 이 그의 정 보 를 되 돌려 주 기 를 기다 리 지만 async 가 설명 한 함수 에서 만 사용 할 수 있 습 니 다.
DEMO 4

function getName() {
    return new Promise((resolve, reject) => {
        let name = "Tom";
        setTimeout(function () {
            name = "Jack";
            resolve(name);
        }, 2000);
    })
}
async function asyncFun() {
    let name = await getName();
    console.log(name);
}
asyncFun();

아니면 그 name 을 가 져 오 는 방법 입 니까? 출력 값 을 보 세 요.
2s 이후 로그 "Jack" 을 출력 합 니 다.
await 를 사용 한 후에 우 리 는 getName 의 반환 값 을 얻 었 습 니 다. 그 전에 then 방법 이 필요 합 니 다. 이 제 는 '비슷 해 보 여요' 동기 화 방식 으로 얻 을 수 있 습 니 다. 왜 동기 화 처럼 보 입 니까? asyncFun 은 비동기 함수 이기 때 문 입 니 다.
DEMO 5

async function asyncFun() {
    let name = await getName();
    console.log(name);
    return name;
}
console.log(asyncFun());

생각해 보 세 요. "Jack" 을 출력 할 수 있 습 니까?
사실은 안 됩 니 다. asyncFun 은 비동기 함수 이기 때문에 돌아 오 는 것 은 Promise 대상 입 니 다.
이상 이 모든 내용 입 니 다. 이것 도 제 가 Axios 와 anync / awat 를 사용 하면 서 겪 은 문제 입 니 다. 시간 이 좀 걸 려 서 이 물건 들 의 원 리 를 완전히 알 게 되 었 습 니 다.
정리 하 는데 3 시간 이 넘 게 걸 릴 줄 몰랐어 요.