비동기 작업을 처리하는 방법-JS 튜토리얼-php.cn

비동기 작업을 처리하는 방법

Barbara Streisand

풀어 주다： 2024-12-10 13:04:09

원래의

549명이 탐색했습니다.

How to Handle Asynchronous Operations

비동기 작업을 처리하는 방법

TypeScript에는 콜백, 약속, 비동기/대기 등 비동기 작업을 처리하는 여러 가지 방법이 있습니다. 비동기식 프로그래밍을 사용하면 다른 코드의 실행을 차단하지 않고 API에서 데이터를 가져오는 등 시간이 걸릴 수 있는 작업을 관리할 수 있습니다.

콜백

콜백은 다른 함수에 인수로 전달되는 함수이며 작업이 완료된 후 실행됩니다. 콜백은 간단한 작업에 작동하지만 작업을 연결해야 할 때는 금방 읽을 수 없게 될 수 있습니다.

type Todo = {
  id: number;
  userId: number;
  title: string;
  completed: boolean;
};
const createPromise = (
  id: number,
  callback: (error: Error | null, task: Todo | null) => void
) => {
  fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
    .then((response) => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("failed to load data");
      }
    })
    .then((data) => {
      callback(null, data);
    })
    .catch((error) => {
      callback(error, null);
    });
};

createPromise(1, (error, task) => {
  if (error) {
    console.error(error);
  } else {
    console.log(task);
  }
});

로그인 후 복사

약속

Promise는 .then() 및 .catch() 메서드를 사용하여 보다 선형적인 방식으로 비동기 작업을 처리할 수 있도록 하여 콜백보다 깔끔한 접근 방식을 제공합니다. 연결하기는 더 쉽지만 복잡한 작업으로 인해 지저분해질 수 있습니다.

const createPromise = (id: number): Promise<object> => {
  return new Promise<object>((resolve, reject) => {
    const data: object = fetch(
      `https://jsonplaceholder.typicode.com/todos/${id}`
    ).then((response) => response.json());
    if (data) {
      resolve(data);
    } else {
      reject("failed to load data");
    }
  });
};

createPromise(1)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

로그인 후 복사

비동기/대기

Async/await는 프라미스와 콜백에 비해 비동기 코드를 처리하는 더 읽기 쉽고 관리하기 쉬운 방법을 제공합니다. 이를 통해 비동기 코드를 마치 동기 코드인 것처럼 작성할 수 있습니다. async 키워드를 사용하여 함수를 비동기로 표시하고 Promise가 해결될 때까지 코드 실행을 일시 중지할 때까지 기다립니다. 이 접근 방식은 향상된 가독성을 제공하고 디버그하기가 더 쉽습니다.

type Todo = {
  id: number;
  userId: number;
  title: string;
  completed: boolean;
};
const getTodo = async (): Promise<Todo> => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();
  return data;
};

console.log(getTodo());

로그인 후 복사