비동기 JavaScript를 처음 접했을 때 콜백 때문에 어려움을 겪었고 Promise가 내부적으로 어떻게 작동하는지 전혀 몰랐습니다. 시간이 지나면서 Promise와 async/await에 대해 배우면서 코딩에 대한 접근 방식이 바뀌어 훨씬 더 관리하기 쉬워졌습니다. 이 블로그에서는 이러한 비동기 패턴을 단계별로 살펴보고 개발 프로세스를 간소화하고 코드를 더 깔끔하고 효율적으로 만드는 방법을 공개합니다. 이러한 개념을 함께 살펴보고 알아봅시다!
비동기 JavaScript를 배우는 것은 현대 웹 개발에 필수적입니다. 이를 통해 API 요청과 같은 작업을 효율적으로 처리하고 애플리케이션의 응답성과 속도를 빠르게 유지할 수 있습니다. Promise 및 async/await와 같은 비동기 기술을 익히는 것은 확장 가능한 애플리케이션을 구축하는 것뿐만 아니라 이러한 개념을 이해하는 것이 주요 초점인 JavaScript 취업 면접에서 성공하는 데에도 중요합니다. 비동기 JavaScript를 마스터하면 코딩 기술을 향상하고 실제 과제에 더 잘 대비할 수 있습니다.
JavaScript의 비동기 패턴은 애플리케이션을 정지하지 않고 서버에서 데이터를 가져오는 등 시간이 걸리는 작업을 처리하는 데 사용되는 기술입니다. 처음에 개발자는 콜백을 사용하여 이러한 작업을 관리했지만 이 접근 방식으로 인해 "콜백 지옥"이라고 알려진 복잡하고 읽기 어려운 코드가 생성되는 경우가 많았습니다. 이를 단순화하기 위해 Promise가 도입되어 작업을 연결하고 오류를 보다 우아하게 처리함으로써 비동기 작업을 처리하는 더 깔끔한 방법을 제공했습니다. async/await로 진화가 계속되었습니다. 이를 통해 동기 코드처럼 보이고 동작하는 비동기 코드를 작성할 수 있어 읽기 및 유지 관리가 더 쉬워졌습니다. 이러한 패턴은 효율적이고 반응이 빠른 애플리케이션을 구축하는 데 중요하며 최신 JavaScript 개발의 기본입니다. 이 블로그 전체에서 이러한 개념을 더 자세히 살펴보겠습니다.
콜백은 수신 함수가 특정 시점에 콜백을 실행할 목적으로 다른 함수에 인수로 전달하는 함수입니다. 이는 서버에서 데이터를 가져오거나 계산을 마친 후와 같이 특정 작업이 완료된 후 일부 코드가 실행되도록 하려는 시나리오에 유용합니다.
콜백 작동 방식:
예시 1
function fetchData(callback) {
// Simulate fetching data with a delay
setTimeout(() => {
const data = "Data fetched";
callback(data); // Call the callback function with the fetched data
}, 1000);
}
function processData(data) {
console.log("Processing:", data);
}
fetchData(processData); // fetchData will call processData with the data
예 2
// Function that adds two numbers and uses a callback to return the result
function addNumbers(a, b, callback) {
const result = a + b;
callback(result); // Call the callback function with the result
}
// Callback function to handle the result
function displayResult(result) {
console.log("The result is:", result);
}
// Call addNumbers with the displayResult callback
addNumbers(5, 3, displayResult);
참고: 콜백은 비동기 작업을 처리하는 데 효과적이라고 생각하지만 주의하세요. 특히 중첩된 콜백의 경우 코드가 복잡해지면 콜백 지옥이라는 문제가 발생할 수 있습니다. 이 문제는 콜백이 서로 깊게 중첩되어 가독성 문제를 일으키고 코드를 유지 관리하기 어렵게 만들 때 발생합니다.
콜백 지옥(Pyramid of Doom이라고도 함)은 중첩된 콜백이 여러 개 있는 상황을 말합니다. 이는 여러 비동기 작업을 순차적으로 수행해야 하고 각 작업이 이전 작업에 의존하는 경우에 발생합니다.
예. 이는 읽고 유지하기 어려운 "피라미드" 구조를 만듭니다.
fetchData(function(data1) {
processData1(data1, function(result1) {
processData2(result1, function(result2) {
processData3(result2, function(result3) {
console.log("Final result:", result3);
});
});
});
});
콜백 지옥 문제:
콜백 작업 시 오류 우선 콜백이라는 패턴을 사용하는 것이 일반적입니다. 이 패턴에서 콜백 함수는 첫 번째 인수로 오류를 사용합니다. 오류가 없으면 첫 번째 인수는 일반적으로 null이거나 정의되지 않으며 실제 결과는 두 번째 인수로 제공됩니다.
function fetchData(callback) {
setTimeout(() => {
const error = null; // Or `new Error("Some error occurred")` if there's an error
const data = "Data fetched";
callback(error, data); // Pass error and data to the callback
}, 1000);
}
function processData(error, data) {
if (error) {
console.error("Error:", error);
return;
}
console.log("Processing:", data);
}
fetchData(processData); // `processData` will handle both error and data
참고: 콜백 이후 JavaScript에서 비동기 프로세스를 처리하기 위해 Promise가 도입되었습니다. 이제 Promise에 대해 더 자세히 알아보고 내부적으로 어떻게 작동하는지 살펴보겠습니다.
Promise는 비동기 작업의 최종 완료(또는 실패)와 결과 값을 나타내는 객체입니다. 콜백에 비해 비동기 코드를 처리하는 더 깔끔한 방법을 제공합니다.
약속의 목적:
A Promise can be in one of three states:
Note: If you want to explore more, you should check out Understand How Promises Work Under the Hood where I discuss how promises work under the hood.
example 1
// Creating a new promise
const myPromise = new Promise((resolve, reject) => {
const success = true; // Simulate success or failure
if (success) {
resolve("Operation successful!"); // If successful, call resolve
} else {
reject("Operation failed!"); // If failed, call reject
}
});
// Using the promise
myPromise
.then((message) => {
console.log(message); // Handle the successful case
})
.catch((error) => {
console.error(error); // Handle the error case
});
example 2
const examplePromise = new Promise((resolve, reject) => {
setTimeout(() => {
const success = Math.random() > 0.5; // Randomly succeed or fail
if (success) {
resolve("Success!");
} else {
reject("Failure.");
}
}, 1000);
});
console.log("Promise state: Pending...");
// To check the state, you would use `.then()` or `.catch()`
examplePromise
.then((message) => {
console.log("Promise state: Fulfilled");
console.log(message);
})
.catch((error) => {
console.log("Promise state: Rejected");
console.error(error);
});
Chaining allows you to perform multiple asynchronous operations in sequence, with each step depending on the result of the previous one.
Chaining promises is a powerful feature of JavaScript that allows you to perform a sequence of asynchronous operations where each step depends on the result of the previous one. This approach is much cleaner and more readable compared to deeply nested callbacks.
Promise chaining involves connecting multiple promises in a sequence. Each promise in the chain executes only after the previous promise is resolved, and the result of each promise can be passed to the next step in the chain.
function step1() {
return new Promise((resolve) => {
setTimeout(() => resolve("Step 1 completed"), 1000);
});
}
function step2(message) {
return new Promise((resolve) => {
setTimeout(() => resolve(message + " -> Step 2 completed"), 1000);
});
}
function step3(message) {
return new Promise((resolve) => {
setTimeout(() => resolve(message + " -> Step 3 completed"), 1000);
});
}
// Chaining the promises
step1()
.then(result => step2(result))
.then(result => step3(result))
.then(finalResult => console.log(finalResult))
.catch(error => console.error("Error:", error));
Disadvantages of Chaining:
While chaining promises improves readability compared to nested callbacks, it can still become unwieldy if the chain becomes too long or complex. This can lead to readability issues similar to those seen with callback hell.
Note: To address these challenges, async and await were introduced to provide an even more readable and straightforward way to handle asynchronous operations in JavaScript.
async and await are keywords introduced in JavaScript to make handling asynchronous code more readable and easier to work with.
async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Data fetched");
}, 1000);
});
}
async function getData() {
const data = await fetchData(); // Wait for fetchData to resolve
console.log(data); // Logs "Data fetched"
}
getData();
1. Async Functions Always Return a Promise:
No matter what you return from an async function, it will always be wrapped in a promise. For example:
async function example() {
return "Hello";
}
example().then(console.log); // Logs "Hello"
Even though example() returns a string, it is automatically wrapped in a promise.
2. Await Pauses Execution:
The await keyword pauses the execution of an async function until the promise it is waiting for resolves.
async function example() {
console.log("Start");
const result = await new Promise((resolve) => {
setTimeout(() => {
resolve("Done");
}, 1000);
});
console.log(result); // Logs "Done" after 1 second
}
example();
In this example:
Handling errors with async/await is done using try/catch blocks, which makes error handling more intuitive compared to promise chains.
async function fetchData() {
throw new Error("Something went wrong!");
}
async function getData() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error("Error:", error.message); // Logs "Error: Something went wrong!"
}
}
getData();
With Promises, you handle errors using .catch():
fetchData()
.then(data => console.log(data))
.catch(error => console.error("Error:", error.message));
Using async/await with try/catch often results in cleaner and more readable code.
You can use async/await with existing promise-based functions seamlessly.
example
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Data fetched");
}, 1000);
});
}
async function getData() {
const data = await fetchData(); // Wait for the promise to resolve
console.log(data); // Logs "Data fetched"
}
getData();
Best Practices:
async et wait offrent un moyen plus propre et plus lisible de gérer les opérations asynchrones par rapport au chaînage de promesses et aux rappels traditionnels. En vous permettant d'écrire du code asynchrone qui ressemble et se comporte comme du code synchrone, ils simplifient la logique complexe et améliorent la gestion des erreurs avec les blocs try/catch. L'utilisation de async/await avec des promesses permet d'obtenir un code plus maintenable et plus compréhensible.
위 내용은 JavaScript 비동기 패턴 마스터하기: 콜백에서 Async/Await까지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
