JavaScript: 비동기 및 요청

JavaScript는 단일 스레드 언어입니다. 그러나 이벤트 루프를 사용하면 비동기 코드를 실행할 수 있습니다.

이벤트 루프에는 메모리 힙, 호출 스택, 이벤트 대기열 및 이벤트 루프의 네 부분이 있습니다.

힙은 현재 사용 중인 변수와 객체를 저장합니다.

호출 스택이 현재 실행 중인 함수를 추적합니다. 함수가 호출되면 LIFO(last in first out) 순서로 호출 스택에 프레임이 추가됩니다.

API에서 반환된 메시지는 대기열에서 대기하도록 전송됩니다.

그리고 스택이 비어 있는 경우 이벤트 루프는 항상 첫 번째 메시지를 스택으로 가져옵니다.
참고: setTimeout()은 이벤트 루프를 사용하여 콜백 함수의 실행을 지연시키는 노드 함수입니다.

약속은 비동기 작업의 최종 결과를 나타내는 객체입니다. Promise는 보류, 이행, 거부의 세 가지 상태를 가질 수 있습니다. Promise는 해결되거나 거부되면 해결됩니다.

약속의 예는 두 개의 콜백 함수로 처리됩니다.

const handleSuccess = (res) => {
    console.log(res);
}
const handleFailure = (rej) => {
    console.log(rej);
}
const checkNum = (num) => {
    return new Promise((resolve, reject) => {
        if (num > 2) {
            resolve('this num is larger than 2');
        }
        else {
            reject('this num is less than 2');
        };
    })
};
checkNum(5).then(handleSuccess).catch(handleFailure);
// output: this num is larger than 2

.then(handleSuccess,handleFailure)는 .then(handleSuccess).catch(handleFailure)와 같습니다.

4. 3개의 기능이 독립적인 경우 Promise.all([fun1, fun2, fun3]) 사용

async 키워드는 비동기 작업으로 함수를 작성하는 데 사용됩니다. 비동기 함수는 항상 약속을 반환합니다.

const exampleFunction = async ()=>{
    return 5
}
exampleFunction()
.then((res)=>{
    console.log(res)
})
.catch((rej)=>{
    console.log(rej)
})
//Output: 5

2. await 지정된 약속이 해결될 때까지 함수 실행을 중지합니다. Promise가 여전히 Pending 중인 경우 로그 결과는 Pending Promise가 됩니다.
3.try{}catch(err){console.log(err)}를 사용하여 오류를 처리할 수 있습니다.
4. 여러 기능이 동시에 발생할 수 있는 경우 await Promise.all()를 사용하십시오. 해결된 값은 인수 배열에서 해결된 모든 약속이 포함된 배열입니다. 하나의 Promise가 거부되는 즉시 해당 Promise에서 거부 이유를 거부하고 반환합니다.

async function asyncPromAll() {
  const resultArray = await Promise.all([asyncTask1(), asyncTask2(), asyncTask3(), asyncTask4()]);
  for (let i = 0; i<resultArray.length; i++){
    console.log(resultArray[i]); 
  }
}

가져오기 URL은 ${baseUrl}${endPoint}${requestParams}에서 만듭니다.

GET 요청

fetch('http://api-to-call.com/endpoint')
.then(response => {
  if (response.ok) {
    return response. json();
  }
  throw new Error('Request failed!');
}, networkError => console.log(networkError.message)
). then (isonResponse => {
// Code to execute with isonResponse
};

또는

const getData = async () => {
    try {
        const response = await fetch('https://api-to-call.com/endpoint');
        if (response.ok) {
            const jsonResponse = await response.json();
            //code to do with response
        }
        throw new Error('Request failed!');
    } catch (error) {
        console.log(error);
    }
}

3.POST 요청

fetch('http: //api-to-call.com/endpoint', {
    method: 'POST',
    body: JSON.stringify({ id: '200' })
}).then(response => {
    if (response.ok) {
        return response.ison();
    }
    throw new Error('Request failed!');
}, networkError => console.log(networkError.message)
).then(jsonResponse => {
    // Code to execute with isonResponse
});

또는

const getData = async () => {
    try {
        const response = await fetch('https://api-to-call.com/endpoint', {
            method: 'POST',
            body: JSON.stringify({ id: 200 })
        });
        if (response.ok) {
            const jsonResponse = await response.json();
            //code to do with response
        }
        throw new Error('Request failed!');
    } catch (error) {
        console.log(error);
    }
}

Resource referenced: Codecademy.com