Promise가 뭔가요?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다.

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

 

ex)

function getData() {
	var tableData;
	$.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
	return tableData;
}

console.log(getData()); // undefined

=>

비동기 undefined 출력 

 

 

ex) $.get()의 response 값이 tableData에 전달됨

function getData(callbackFunc) {
	$.get('https://domain.com/products/1', function(response) {
		callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
	});
}

getData(function(tableData) {
	console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

 

 

 

async & await는 뭔가요?

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주죠.

 

vue.js 에서 json  테스트 서버 설치 후 db.json 에 데이터  저장된다.

ID 는 자동 생성 된다.

 

등록

     async addTask(task){
        //this.Tasks.push(task);
        //this.Tasks = [...this.Tasks, task];
        //데이터 저장 된다. 
        try {
            const res =await fetch('api/tasks',{
              method:"POST",
              headers:{
                'Content-type':"application/json",
              },
              body:JSON.stringify(task)
            })
            const data=await res.json();
            this.Tasks=[...this.Tasks, data];
        } catch (error) {
          console.log(error);
        }
      }

 

수정

async  toggleReminder(id){        


        //1.json 데이터 업데이트
        const taskToToggle = await this.fetchTask(id);
        const updTask ={...taskToToggle, reminder:!taskToToggle.reminder}
        const res =await fetch(`api/tasks/${id}`,{
            method:'PUT',
            headers:{
              'Content-type':'application/json'
            },
            body:JSON.stringify(updTask)
        });

        await res.json();

        if(res.status===200){
          //2.화면 업데이트
          const  index=this.Tasks.findIndex((task)=>{
              if(task.id===id){
                return id;
              }
          });
          this.Tasks[index].reminder= !this.Tasks[index].reminder;
        }

              
  },

   
 

 

    async fetchTasks(){
          try {
           // const res =await fetch('http://localhost:5001/tasks');
            const res =await fetch('api/tasks');
            const data =await res.json();
            return data;
          } catch (error) {
            console.log(error);            
          }          


    },

    
     async fetchTask(id){
          try {
            const res =await fetch(`api/tasks/${id}`);
            const data =await res.json();
            return data;
          } catch (error) {
            console.log(error);            
          }          
      }

 

 

 

삭제

 

    async deleteTask(id){
          console.log("task " ,id);      
          try {
                if(confirm("정말 삭제 하시겠습니가?")){
                    const res =await fetch(`api/tasks/${id}`,
                      {
                          method:'DELETE'
                      }              
                    );

                    if(res.status ===200){
                      const index=this.Tasks.findIndex((task)=>{
                        if(task.id===id){
                            return id;
                          }
                        });
                      this.Tasks.splice(index, 1);
                    }

                }
          } catch (error) {
            console.log(error);

          }      
      },

 

 

 

 

json 서버 설치

1.

$ npm i json-server

 

 

2.

package.json 에 다음 추가

"backend":"json-server --watch db.json --port 5001"

 

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint",

    "backend":"json-server --watch db.json --port 5001"

  },

 

3. db.json  파일 생성후  json  데이터 넣기

"backend":"json-server --watch db.json --port 5001"

https://github.com/bradtraversy/vue-crash-2021/blob/master/db.json

 

 

4. 실행

$ npm run backend

 

5. 확인 테스트

http://localhost:5001/tasks

 

 

 

예외 처리

동기/비동기 구분없이 try/catch로 일관되게 예외 처리를 할 수 있는 부분도 async/await를 사용해서 코딩했을 때의 큰 이점 중 하나입니다.

 

async function fetchAuthorName(postId) {
  const postResponse = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${postId}`
  );
  const post = await postResponse.json();
  const userId = post.userId;

  try {
    const userResponse = await fetch(
      `https://jsonplaceholder.typicode.com/users/${userId}`
    );
    const user = await userResponse.json();
    return user.name;
  } catch (err) {
    console.log("Faile to fetch user:", err);
    return "Unknown";
  }
}

fetchAuthorName(1).then((name) => console.log("name:", name));

 

 

https://www.daleseo.com/js-async-async-await/