const sendDataBtn = async () => {
const typeS = status === 'running' ? 'stop' : 'start';
await api({
url: `work/${workId}/projects/${projectId}/schedules/${scheduleId}/`,
method: 'post',
headers: { 'content-type': 'application/json' },
data: {
type: typeS,
},
})
.then(window.location.reload())
.catch((error) => {
console.log(error.response);
window.location.reload();
});
};- 비동기 함수 async로 정의
- api 함수를 호출합니다. 이 함수는 인자로 다음과 같은 객체를 받습니다.
url: API 호출할 URL
method: HTTP 메서드 (여기서는 post 입니다.)
headers: HTTP 헤더 (여기서는 content-type 헤더를 application/json으로 설정합니다.)
data: HTTP 요청 본문에 보낼 데이터 (여기서는 type 필드에 typeValue 값을 전달 - api 함수 호출은 await 키워드로 감싸져 있기 때문에 해당 함수의 결과가 반환될 때까지 코드의 실행이 일시 중지됩니다.
async
일반적으로 JavaScript에서 함수 호출은 동기적으로 처리됩니다. 즉, 함수 호출이 끝나기 전에는 다음 코드를 실행할 수 없습니다. 그러나 async 함수를 사용하면 함수 호출 결과를 기다리지 않고 다른 코드를 실행할 수 있습니다.
- async 키워드를 함수 앞에 붙여서 함수를 비동기 함수로 선언합니다.
- async 함수 내부에서 비동기 작업을 수행하는 코드 앞에는 "await" 키워드를 사용합니다. async 함수 내부에서 await 키워드를 사용하면 await 다음에 오는 함수나 프로미스가 완료될 때까지 함수의 실행이 일시 중지됩니다.
(await 키워드는 항상 async 함수 내부에서만 사용할 수 있음) - async 함수는 항상 프로미스를 반환하며, 해당 프로미스는 함수가 완료될 때 해결(resolve)됩니다.async 함수 내부에서 await 키워드를 사용한 비동기 작업의 결과는 Promise 객체로 감싸져 반환됩니다. 이때 프로미스가 해결되는 값은 return 키워드로 반환된 값입니다. (async 함수가 내부적으로 Promise.resolve()로 값을 래핑한다. 따라서 async 함수에서 return 키워드로 반환하는 값은 프로미스로 래핑됩니다.)
- async 함수 내부에서 throw 키워드를 사용하면 프로미스가 거부(reject)됩니다.
Promise
Promise는 JavaScript에서 비동기적인 처리를 위한 객체이다.
Promise는 비동기적으로 실행되는 작업이 완료되었을 때 결과를 반환하고 해당 결과를 처리하기 위한 콜백 함수를 등록할 수 있다.
Promise 객체는 다음과 같은 세 가지 상태 중 하나를 가진다.
- 대기(pending): Promise 객체가 생성된 상태
- 이행(fulfilled): Promise 객체가 생성된 후 비동기 작업이 성공적으로 완료되어 결과값이 존재하는 상태
- 거부(rejected): Promise 객체가 생성된 후 비동기 작업이 실패하여 오류가 발생한 상태
반환된 Promise 객체의 상태는 해당 비동기 작업이 성공적으로 완료되었을 경우 "이행(fulfilled)" 상태이며, 그렇지 않을 경우 "거부(rejected)" 상태이다.
throw
throw는 자바스크립트에서 예외를 발생시키는 데 사용되는 키워드이다.
throw 키워드를 사용하여 예외를 발생시키면, 예외가 발생한 지점에서 코드 실행이 중단되고, 예외 처리기(Exception Handler)로 제어 흐름이 이동합니다.
throw 키워드는 일반적으로 try-catch 문과 함께 사용됩니다. try 블록 내에서 예외가 발생하면 catch 블록이 실행되어 예외 처리를 수행합니다.
catch
자바스크립트에서 예외를 처리하기 위한 구문
then
.then() 메서드는 Promise를 처리할 수 있는 메서드이다.
.then()은 Promise를 return 하고 두 개의 콜백 함수를 인자로 받습니다. 하나는 Promise가 이행됐을 때, 다른 하나는 거부했을 때를 위한 콜백 함수입니다. .then() 메서드는 Promise를 return 하기 때문에 첫 번째. then()에서 반환된 값을 두 번째. then()에 이어서 처리할 수 있는 메서드 체이닝(chaning)이 가능합니다.
