JavaScript 비동기 함수의 반환 값을 얻는 방법

오늘 작은 질문을 공부해 보세요. JavaScript비동기 함수의 반환 값을 얻는 방법은 무엇입니까?

1. 잘못된 시도

업계에 들어오지 않았을 때의 첫 시도:

2. 콜백 함수

뜨는 것은 4가 아니라 0입니다. 나중에 이것이 비동기 문제라는 것을 알았습니다.

은 콜백을 사용해야 합니다. technology:

<script>
function getSomething() {
 var r = 0;
 setTimeout(function() {
 r = 2;
 }, 10);
 return r;
}

function compute() {
 var x = getSomething();
 alert(x * 2);
}
compute();
</script>

3.promise

콜백 함수가 정말 좋은데, 이렇게 코드를 작성해 왔습니다. 오랫동안. 비동기가 발생하면 함수를 전달하세요! ! 나중에 나는 콜백 함수로 인해 발생하는 문제를 구체적으로 해결하는 promise라는 것이 있다는 것을 알게 되었고, promise에 대해서도 배웠습니다.

<script>
function getSomething(cb) {
 var r = 0;
 setTimeout(function() {
 r = 2;
 cb(r);
 }, 10);
}

function compute(x) {
 alert(x * 2);
}
getSomething(compute);
</script>

promise는 여전히 콜백을 포기하지 않습니다. 이지만 콜백이 변경된 위치에서만 발생합니다.

4.generator

나중에 Generator에 대해 알아보고 함수 실행을 중단하는 기능이 있다는 것을 알고 새로운 시도를 했습니다.

<script>
function getSomething() {
 var r = 0;
 return new Promise(function(resolve) {
 setTimeout(function() {
  r = 2;
  resolve(r);
 }, 10);
 });
}

function compute(x) {
 alert(x * 2);
}
getSomething().then(compute);
</script>

동기식 쓰기 방식은 비동기식 논리를 구현할 수 있어 훨씬 더 발전된 느낌을 줍니다.

5. Promise + Generator

나중에 Promise + Generator가 대공포를 비동기식으로 사용하여 모기를 죽이는 완벽한 방법이라고 들었습니다(이 예제로는 충분하지 않습니다). 둘을 함께 사용하면 어떤 이점이 있는지 알려주세요):

<script>
function getSomething() {
 var r = 0;
 setTimeout(function() {
 r = 2;
 it.next(r);
 }, 10);
}

function *compute(it) {
 var x = yield getSomething();
 alert(x * 2);
}
var it = compute();
it.next();
</script>

6. async

이거면 충분하다고 생각합니다. 그리고 나중에 es7이 궁극적인 해결책인 비동기를 제공했다는 소식을 들었습니다.

배움을 좋아하는 청년으로서 뒤처질 수 없다고 생각했습니다.

여기서 드디어 안도의 한숨을 쉬었습니다.

추신:

위의 모든 예제는 최신 크롬에서 실행될 수 있습니다.

위 내용은 JavaScript 비동기 함수의 반환 값을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!