async/await의 내용

머리말

면접 중 async/await는 지원자의 지식을 나타내는 좋은 지표입니다. 물론, 이 지식 포인트를 어떤 각도로 설명해야 할지 고민은 하지 않았습니다. 면접관의 질문에 자체 실행 생성기의 구문 설탕에 답할 수 있습니다. 그런데 나는 그것을 조금 깨달은 걸까, 아니면 그의 깨달음을 본 걸까?

바벨은 어떻게 구현되나요?

참고: Generator에 대해 모른다면 먼저 Generator를 살펴보고, 그런데 Iterator를 살펴보세요.

ex 코드:

async function t() {
    const x = await getResult();
  	const y = await getResult2();
  	return x + y;
}

babel 변환 코드

"use strict";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
    try {
        var info = gen[key](arg);
        var value = info.value;
    } catch (error) {
        reject(error);
        return;
    }
    if (info.done) {
        resolve(value);
    } else {
        Promise.resolve(value).then(_next, _throw);
    }
}

function _asyncToGenerator(fn) {
    return function () {
        var self = this, args = arguments;
        return new Promise(function (resolve, reject) {
            var gen = fn.apply(self, args);
            function _next(value) {
                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
            }
            function _throw(err) {
                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
            }
            _next(undefined);
        });
    };
}

function t() {
  return _t.apply(this, arguments);
}

function _t() {
  _t = _asyncToGenerator(function* () {
    const x = yield getResult();
    const y = yield getResult2();
    return x + y;
  });
  return _t.apply(this, arguments);
}

코드에서 볼 수 있듯이 babel은 다음을 사용하여 generator를 async로 변환합니다. _asyncToGenerator와 asyncGeneratorStep의 두 단계가 있습니다. babel将一个generator转化为async用了两步_asyncToGenerator和asyncGeneratorStep。

_asyncToGenerator干了什么

1、调用_asyncToGenerator返回了一个promise，刚好符合async函数可以接then的特性。

2、定义了一个成功的方法_next，定义了一个失败的方法_throw。两个函数中是调用asyncGeneratorStep。看完asyncGeneratorStep就知道这其实是一个递归。

3、执行_next。也就是上面说的自执行的generator。

asyncGeneratorStep干了什么

1、try-catch去捕获generator执行过程中的错误。如果有报错，async函数直接是reject状态。

2、判断info中的done值，是否为true，为true就代表迭代器已经执行完毕了，可以将value值resolve出去。反之，则继续调用_next将值传递到下一个去。

这里我唯一没有看明白的是`_throw`，这个看代码像是执行不到的。promise.resolve状态值应该是fulfilled。看懂的
可以在评论中和我说一下，感谢。

async/await的优势

每当一种新的语法糖出现，必定是弥补上一代解决方案的缺陷。

ex：

promise的出现，是为了去避免callback hell

_asyncToGenerator가 수행한 작업

1. _asyncToGenerator를 호출하면 promise가 반환되었습니다. 이는 바로 async가 수행한 작업입니다. 함수는 then에 연결되는 속성을 수행할 수 있습니다.

2. 성공한 메소드 _next를 정의하고 실패한 메소드 _throw를 정의하세요. 두 함수 모두 asyncGeneratorStep가 호출됩니다. asyncGeneratorStep을 읽고 나면 이것이 실제로 재귀라는 것을 알게 될 것입니다.

---

3. _next를 실행하세요. 이것이 위에서 언급한 자체 실행 생성기입니다.

asyncGeneratorStep의 기능

1. generator 실행 중 오류를 포착하기 위해 Try-catch를 수행합니다. 오류가 보고되면 async 함수는 바로 reject 상태로 들어갑니다.

2. info의 done 값이 true인지 확인합니다. true이면 반복자가 실행되었음을 의미합니다. 밸류코드>나가세요. 그렇지 않으면 _next를 계속 호출하여 값을 다음 항목에 전달하세요.

function getData() {
    getRes().then((res) => {
        console.log(res);
    })
}

async/await의 장점

새로운 구문 설탕이 나타날 때마다 이전 세대 솔루션의 단점을 보완해야 합니다.

ex:

promise의 출현은 콜백 지옥을 피하는 방법입니다.

그럼 async/await는 무엇을 해결하나요?

Promise를 async/await로 대체해야 하는 몇 가지 필요성

비동기를 처리하는 동기식

async/await는 동기화 스타일에 더 가깝지만 Promise는 async/await보다 나은 then 메서드를 사용합니다. 비교하면, 코드가 더 많아지고 async/await와 동기화 기능 사이에는 큰 차이가 없지만 promise 작성 방법에는 여전히 격차가 있습니다.

Promise 및 async/await 코드 비교

promise 버전

const getData = async function() {
    const res = await getRes();
    console.log(res);
}

async/await 버전

const morePromise = () => {
	return promiseFun1().then((value1) => {
		return promiseFun2(value1).then((value2) => {
			return promiseFun3(value1, value2).then((res) => {
				console.log(res);
			})
		}) 
	})
}

async/await 버전

const morePromise = () => {
	return promiseFun1().then((value1) => {
		return promiseAll([value1, promiseFun2(value1)])
	}).then(([value1, value2]) => {
		return promiseFun3(value1, value2).then((res) => {
			console.log(res);
		})
	})
}

중간 값

Promise를 사용하면 여러 Promise가 직렬화될 때 후속 Promise도 얻은 이전 약속의 가치는 매우 어렵습니다. 그리고 async는 이 문제를 정확하게 해결합니다.

Promise에 의한 중간값 획득의 예

const morePromise = async function() {
	const value1 = await promiseFun1();
	const value2 = await promiseFun2(value1);
	const res = await promiseFun3(value1, valuw2);
	return res;
}

위는 중첩된 버전이므로 필요에 따라 중첩되지 않을 수도 있습니다.

const a = () => {
    return getResult().then((data) => {
        if(data.hasMore) {
            return getMoreRes(data).then((dataMore) => {
                return dataMore;
            })
        } else {
            return data;
        }
    })
}

중첩 수준이 줄어들었지만 여전히 만족스럽지 않습니다.

async/await 최적화 예제 사용

const a = async() => {
    const data = await getResult();
    if(data.hasMore) {
        const dataMore = await getMoreRes(data);
        return dataMore;
    } else {
        return data;
    }
}

직렬 비동기 프로세스에는 중간 값이 포함되어야 하므로 async/await의 장점은 분명합니다.

조건문의 상황예를 들어 현재 요구 사항이 있는 경우 데이터를 요청한 후 추가 데이터를 요청해야 하는지 여부를 결정할 수 있습니다. Promise를 사용하여 구현하면 여전히 중첩된 수준이 있습니다.

const a = async function() {
    const res = await Promise.all[getRes1(), getRes2()];
    return res;
}

하지만 비동기를 사용하여 이 예제를 최적화하면 코드가 더 아름다워질 수 있습니다.

async/await 최적화 예

const a = async () => {
    try{
        const res = await Promise.reject(1);
    } catch(err) {
        console.log(err);
    }
}

async/await의 단점

🎜위에서 async/await의 몇 가지 장점에 대해 이야기했지만 async/await가 만능은 아닙니다. 위의 내용은 모두 직렬 비동기 시나리오에 관한 것입니다. 병렬 비동기 시나리오로 전환하는 경우. 🎜🎜병렬 비동기 시나리오🎜

const a = async function() {
    const res = await Promise.reject(1).catch((err) => {
        console.log(err);
    })
}

🎜🎜async/await 오류 처리🎜🎜🎜async/await를 구현하려면 promise.all을 사용해야 합니다. 오류 캡처 측면에서 주로 try-catch를 사용합니다. 🎜🎜🎜try-catch🎜🎜

// 公共函数

function errWrap(promise) {
    return promise().then((data) => {
        return [null, data];
    }).catch((err) => {
        return [err, null];
    })
}

🎜🎜promise's catch🎜🎜🎜는 이를 위해 공개 함수를 추출할 수 있습니다. 각 약속 뒤에는 catch 처리가 따르기 때문에 코드가 매우 길어집니다. 🎜rrreeerrreee🎜추천 튜토리얼: "🎜JS Tutorial🎜"🎜

위 내용은 async/await의 내용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!