JavaScript 비동기 호출 프레임워크(1부 - 문제 및 시나리오)_javascript 기술

문제
Ajax 애플리케이션에서 XMLHttpRequest를 호출하는 것은 매우 일반적인 상황입니다. 특히 클라이언트 중심의 Ajax 애플리케이션의 경우 서버로부터 데이터를 얻어야 하는 다양한 작업은 XHR 비동기 호출을 통해 완료된다. 그러나 단일 스레드 JavaScript 프로그래밍에서 XHR 비동기 호출의 코드 스타일은 실제로 일반 JavaScript 코드와 호환되지 않습니다.

추가 매개변수
분할 함수를 고려해보세요. 순수하게 클라이언트측 동기 함수라면 서명은 다음과 같습니다.

function Divide(operand1 , Operand2 )

그러나 클라이언트 측 분할의 정확성이 만족스럽지 않아 분할을 서버 측으로 전송하여 실행한다고 가정합니다. 그러면 XHR을 호출해야 하는 비동기 함수입니다. , 서명은 다음 중 하나일 수 있습니다. :

코드 복사 코드는 다음과 같습니다.

함수 나누기(operand1, Operand2, callback)
함수 나누기(operand1, Operand2, SuccessCallback, failureCallback)
함수 나누기(operand1, Operand2, options)

콜백 함수를 전달하려면 서명에 새 매개변수를 도입해야 합니다. 함수를 차단 동기 호출로 만드는 옵션은 없습니다.

이동성
XHR을 직접 작동하는 함수에는 새로운 매개변수를 도입해야 할 뿐만 아니라 이러한 복잡성도 호출 스택을 따라 전달됩니다. 예를 들어, 덧셈, 뺄셈, 곱셈, 나눗셈의 네 가지 산술 연산을 캡슐화했으며 하나의 연산 인터페이스만 노출했습니다.

functioncalculate(operand1, Operand2, Operator)

이 계산 함수 연산자 매개변수를 기반으로 내부 더하기, 빼기, 곱하기, 나누기 기능을 호출합니다. 다만, 나누기 함수가 비동기 함수가 되기 때문에 전체 계산 함수를 비동기 함수로 변환해야 합니다:

함수 계산(operand1, Operand2, 연산자, 콜백)

동시에 계산을 위해 호출해야 하는 스택의 모든 함수는 상위 수준 호출 함수에서 결과를 반환할 필요가 없는 한 비동기화되어야 합니다.

동기적 공존
calculate 함수는 비동기 함수가 되지만, 이것이 호출하는 더하기, 빼기, 곱하기 함수는 여전히 동기 함수입니다. 이때는 계산을 수행하는 것입니다. 비동기 동기화 기능입니다.

이로 인해 어떤 문제가 발생하나요? 계산 호출자는 함수 시그니처를 보면 콜백 함수를 전달해야 하기 때문에 자연스럽게 계산이 비동기 함수라고 생각할 것입니다. 그러나 계산 실행 방법은 불확실합니다. 다음 호출을 고려해 보세요.

calculate(operand1, Operand2, Operator, callback);
next();

여기에는 콜백과 다음이라는 두 가지 함수가 포함됩니다. 어느 것이 마지막으로 실행되는지 실행이 불확실하거나 계산의 특정 구현에 따라 달라집니다.

calculate 구현의 경우 비동기 작업이 필요하지 않은 경우 콜백을 직접 호출합니다. 그런 다음 덧셈, 뺄셈, 곱셈을 수행할 때 next가 먼저 호출되고, 나눗셈을 수행할 때 next가 콜백보다 먼저 호출됩니다.

이런 불확실성이 마음에 들지 않으면 계산 구현을 변경하고 모든 동기 호출을 setTimeout 형식으로 변경하여 어떤 상황에서도 콜백 전에 반드시 next가 호출되도록 할 수 있습니다.

그러나 후자의 접근 방식은 비용이 더 많이 드는 구현에 의존합니다. 개발자가 실수로 setTimeout을 놓칠 수도 있고(또는 그냥 게으르기 때문에) 함수 호출 순서가 불확실해질 수 있으므로 우리는 이 함수를 사용하고 싶습니다. 프레임워크를 사용하면 이를 달성하는 데 도움이 되며 프레임워크를 사용할 때 이를 피할 수 있는 방법이 없습니다.

시나리오
여기에서는 위의 문제에 대한 구체적인 적용 시나리오를 제시하겠습니다. (문제를 단순화하기 위해 설명을 약간 수정했는데, 이는 실제 애플리케이션과 일치하지 않습니다.)

Baidu Hi 웹 버전에서는 사용자 개체 목록을 클라이언트에 저장하고, 이 사용자와의 채팅 창에서 이 사용자의 정보를 읽어야 할 때입니다. 이 작업에는 동기식 또는 비동기식일 수 있는 많은 분기가 포함됩니다.

사용자 개체가 캐시되지 않습니다
사용자 정보를 비동기식으로 읽습니다
사용자 개체가 캐시됩니다
사용자는 친구입니다(정보 업데이트 서버 클라이언트 푸시에 의해 업데이트됨)
사용자 정보를 동기적으로 읽기
사용자가 친구가 아닙니다(정보 업데이트는 클라이언트에서 가져와야 함)
캐시 정보를 허용할 수 있음
사용자 정보 읽기 동기식
최신 정보를 얻어야 합니다
사용자 정보를 비동기식으로 읽어옵니다
브랜치의 결과가 동기식과 비동기식 모두인 것을 확인할 수 있습니다. 그리고 이러한 가지는 하나의 기능으로 완성되는 것이 아니라 여러 기능으로 완성됩니다. 즉, 기존 모델에 따르면 이러한 함수 중 일부는 동기식이고 일부는 비동기식입니다. 비동기식의 전이성으로 인해 최종 호출 스택의 맨 위에 있는 함수는 모두 비동기식입니다.

이 문제를 해결하려면 비동기 호출 프레임워크를 작성하고, 통일된 호출 방법을 사용하고, 동기 호출과 비동기 호출을 하나의 반환 메서드로 결합해야 합니다.