JavaScript 비동기 함수의 반환 값 인스턴스를 얻는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript 비동기 함수의 반환 값 인스턴스를 얻는 방법에 대한 자세한 설명

怪我咯

풀어 주다： 2017-06-29 10:58:19

원래의

1745명이 탐색했습니다.

이 글에서는 JavaScriptasynchronousfunction반환 값을 얻는 방법에 대한 경험과 최종 해결책을 공유할 것입니다. 도움이 필요한 친구는 이를 참고할 수 있습니다.

오늘은 작은 문제인 JavaScript를 비동기적으로 얻는 방법을 공부하겠습니다. 함수 반환 값 ?

1. 잘못된 시도

업계에 종사하지 않았을 때의 초기 시도:

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

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

로그인 후 복사

2.콜백 기능

팝업이 4가 아니라 0이었습니다. 나중에 이것이

콜백 기술을 사용하여 수행하세요.

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

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

로그인 후 복사

3.promise

콜백 함수는 정말 좋은 기능이고 저는 오랫동안 이런 코드를 작성해 왔습니다. 비동기를 만나면 함수를 전달하세요! ! 나중에 콜백 함수로 인해 발생하는 문제를 해결하기 위해 고안된 promise라는 것이 있다는 것을 알게 되었고, promise에 대해서도 알게 되었습니다.

<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>

로그인 후 복사

promise는 여전히 콜백을 포기하지 않았지만 콜백 위치가 변경되었습니다.

4.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>

로그인 후 복사

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

5. Promise + Generator

나중에 Promise + Generator가 비동기화에 완벽한 방법이라는 말을 듣고 신속하게 대공포를 사용하여 모기를 죽였습니다. (이 예는 사용의 이점을 설명하기에는 충분하지 않습니다. 둘이 함께):

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

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

로그인 후 복사

6. async

나는 이것이 충분히 멋지다고 생각했지만 나중에 es7이 궁극적인 솔루션인 비동기를 제공했다는 소식을 들었습니다.

배움을 좋아하는 청년으로서 저는 뒤쳐질 수 없다고 생각합니다:

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

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

로그인 후 복사

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