[TIL] Day34 - 비동기 처리

비동기 non-blocking

싱글 스레드, 이벤트 기반, 논블로킹 I/O

중 논블로킹 I/O == 비동기식 동작 때문에 변수 가 다른 스코프에서 동작하지 않는다

작업이 시작된 후 그 작업이 완료될 때까지 기다리지 않고 다음 작업을 계속 수행하는 방식

 

비동기 발행 : 실행되는 코드가 기다려야 하는 시간이 생긴다. 순서를 기다리지 않고 다음코드 실행한다.

• setTimeOut(), setInterval(), query()
• 쿼리 실행하는 순간, 끝나기도 전에 뒤의 코드가 실행된다.

비동기 처리 : 비동기가 필요없을때 > 쿼리 기다려야할때 등등.... ㅇ이전코드의 시간을 기다리고, 순서대로 실행한다.

1. 콜백 함수 : 메소드 실행 할꺼 다 하고, 이 함수 실행해줘(순서 맞춰서 이걸 뒤에 실행해달라고 요청)
2. promis 객체 (resolve, reject)
3. then & catch
4. `async` & `await` < ES2017 promise

 

Promise

약속을 지키는 메소드

매개변수로 함수를 사용한다

executor 함수가 할 일  >  성공 `resolve(결과)`, 실패 `reject(에러)`

결국, 무조건 콜백함수 resolve() 또는 reject() 함수 호출

promise가 일 다 하고 호출해야 하는 함수 `promise.then(___,___);`

 

setTimeout(); 으로 시간차이를 잘 작동하는지 체크해보는 테스트

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("done!"), 3000);
});

promise.then(
  function (result) {
    console.log(result);
  },
  function (err) {}
);

 

블로킹 기본 코드와 차이

function first(){console.log("첫 번째");}

function second(){console.log("두 번째");}

function third(){console.log("세 번째");}

first();
setTimeout(second, 2000);
third();

///console
첫 번째
세 번째
두 번째

 

Promise chain

여러개 비동기처리

//Promise
let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("done!"), 3000);
})
  .then(
    function (result) {
      console.log(result);
      return result + "~~~~";
    },
    function (err) {}
  )
  .then(
    function (result) {
      console.log(result);
      return result + "!!!!";
    },
    function (err) {}
  )
  .then(
    function (result) {
      console.log(result);
    },
    function (err) {}
  );

//console
done!
done!~~~~
done!~~~~!!!!

 

async - await

Promise 객체를 쉽게 사용하는 문법. 비동기 처리가 쉽다

 

async 함수

async function f() {
  return 5;
}
f().then(
  function (result) {
    console.log("promise resolve : ", result);
  },
  function (err) {
    console.log("promise reject : ", err);
  }
);

new 로 Promise 객체 생성 > async 첫번째 기능 : 반환할때 무조건 Promise 객체로 반환한다. `Promise.resolve(7)`

만약 반환값이 Prmoise 가 아니면, Promise.resolve로 감싼다. 

 

await 함수

then 자리 치환

async 함수 안에서만 동작한다.

async function f() {
  let promise = new Promise(function (resolve, reject) {
    setTimeout(() => resolve("done!"), 3000);
  });

  let result = await promise;
  console.log(result);
}
f();

async의 두번째 기능 : Promise 객체가 일이 끝날 때까지 기다릴 수 있는 공간을 제공한다.

 

+ chain

promise 객체 한개당 > 쿼리 하나당 > 

async function f() {
  let promise1 = new Promise(function (resolve, reject) {
    setTimeout(() => resolve("111done!"), 3000);
  });

  let result1 = await promise1;
  console.log(result1);

  let promise2 = new Promise(function (resolve, reject) {
    setTimeout(() => resolve("222done! with " + result1), 3000);
  });
  let result2 = await promise2;
  console.log(result2);

  let promise3 = new Promise(function (resolve, reject) {
    setTimeout(() => resolve("333done! with " + result2), 3000);
  });
  let result3 = await promise3;
  console.log(result3);
}
f();

 

주문 쿼리 비동기

mysql에서는 쿼리를 Promise 객체로 제공할 수 있다.

db 세팅 파일

//mysql 모듈 소환
const mariadb = require("mysql2/promise");

//DB와 연결 통로 생성
const connection = async () => {
  const conn = await mariadb.createConnection({
    host: "localhost",
    ///...
  });
  return conn;
};

module.exports = connection;

 

**async와 awati 범위와 관련된 문제가 발생!!!

Promise Wrappers | Quickstart

 

conn 안에는 promise를 적용하지 말고, conn을 밖에서 .promise() 메소드 끼워져서 사용

const mariadb = require("../mariadb/promise");

const order = async (req, res) => {
  const conn = await mariadb.createConnection({
    host: "localhost",
    user: "root",
    password: "root",
    database: "Bookshop",
    dateStrings: true,
  });

  const { items, delivery, totalQuantity, totalPrice, userId, firstBookTitle } =
    req.body;
  var delivery_id;
  var order_id;
  let sql =
    "INSERT INTO delivery (address, receiver, contact) VALUES (?, ?, ?);";
  let values = [delivery.address, delivery.receiver, delivery.contact];

  let [results] = await conn.query(sql, values);
  console.log(results);

공식문서에서 mariadb 모듈화가 아닌, 사용할 함수에서 db 통로를 사용하는 방법 1

 

☑️ 배운 점

비동기화 개념, Promise, aysnc await

오늘 배운 것들 처음 사용하는거라 어색하고 이해가 어렵다..