8. 비동기(콜백함수, 프로미스, await/async, fetch)

8-1. 비동기 처리

8-1-1. 비동기 이해

8-1-2. 비동기 처리의 필요성

let response = fetch('mySnack.jpg');
let snackImg = response.snackImg(); //서버에서 이미지를 가져오면 이미지 크기, 네트워크 환경에 따라 실행 불가한 경우 발생, 비동기 처리 필요

8-1-3. 비동기 처리의 종류

8-2. 콜백함수

8-2-1. 콜백함수 이해하기

function dessert(count, eat, good) {
		count < 3 ? eatDessert() : goodDessert();
}

function eatDessert() {
    console.log('오늘 먹어야 할 간식을 먹어주세요');
}

function goodDessert() {
    console.log('오늘 먹어야할 간식을 모두 먹었습니다');
}

dessert(4, eatDessert, goodDessert);

8-2-2. 동기 / 비동기 처리

function time() {
		const 시작 = Date.now();
    for (let k=0; k < 100000000; k++) {
}
    const 끝 = Date.now();
	  console.log(끝 - 시작 + 'ms'); //61ms
}

time();
console.log('다음 작업');

function time() {
		setTimeout(() => {
	    const 시작 = Date.now();
	    for (let k=0; k < 100000000; k++) {
		} 
			const 끝 = Date.now();
	    console.log(끝 - 시작 + 'ms');
	}, 0);
}

console.log('시작');
time();
console.log('다음 작업');

function time(callback) {
    setTimeout(() => {
        const 시작 = Date.now();
        for (let k = 0; k < 100000000; k++) {

        }
        const 끝 = Date.now();
        console.log(끝 - 시작 + 'ms');
        callback();
    }, 0);
}

console.log('시작');
time(() => {
    console.log('작업이 끝났습니다.');
});
console.log('다음 작업');

8-2-3. 콜백함수를 활용하는 메서드

8-2-3-1. 콜백함수를 활용하는 함수: forEach()

let numberList = [181, 161, 25, 44];

numberList.forEach(function (value, index, array) {
    console.log(value, index, array);
    console.log(`${index}번째의 값은 ${value}`);
});

let numberList = [181, 161, 25, 44];

numberList.forEach(x => {
    console.log(x * 2);
});


//출력결과
//362
//322
//50
//88

8-2-3-2. 콜백함수를 활용하는 함수: map()

// 배열 선언
let numberList = [181, 161, 25, 44];

// 배열의 모든 값에 2를 곱한다.
numberList = numberList.map(function (value, index, array) {
    return value * 2;
})

// 출력한다.
// 매개변수로 console.log 메서드 자체를 넘겨주었다.
numberList.forEach(console.log);

8-2-3-3. 콜백함수를 활용하는 함수: filter()

const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8];

let evenNumbers = numbers.filter(function (value) {
    return value % 2 === 0;
});

let oddNumbers = numbers.filter(function (value) {
    return value % 2 === 1;
});
        
console.log(`원래 배열: ${numbers}`);
console.log(`홀수만 추출: ${oddNumbers}`);
console.log(evenNumbers);

8-2-4. 콜백지옥

setTimeout(
    (name) => {
    let snackList = name;
    console.log(snackList);

        setTimeout(
                (name) => {
                    snackList += ', ' + name;
                    console.log(snackList);

                        setTimeout(
                                (name) => {
                                snackList += ', ' + name;
                                console.log(snackList);

                                setTimeout(
                                        (name) => { 
                                        snackList += ', ' + name;
                                        console.log(snackList);

                                    }, 500, '다쿠아즈');

                            }, 500,'초코롤');

                }, 500, '마카롱');

}, 500, '파운드');

> 출력값
파운드 (0.5초)
파운드, 마카롱 (1.0초)
파운드, 마카롱, 초코롤(1.5초)
파운드, 마카롱, 초코롤, 다쿠아즈(2.0초)

콜백 지옥 탈출

let coffeeList = '';

const addPound = (name) => {
    coffeeList = name;
    console.log(coffeeList);
    setTimeout(addMacaron, 500, '마카롱');
};

const addMacaron = (name) => {
    coffeeList += ', ' + name;
    console.log(coffeeList);
    setTimeout(addChocoroll, 500, '초코롤');
};

const addChocoroll = (name) => {
    coffeeList += ', ' + name;
    console.log(coffeeList);
    setTimeout(addDacquoise, 500, '다쿠아즈');
};

const addDacquoise = (name) => {
    coffeeList += ', ' + name;
    console.log(coffeeList);
};

setTimeout(addPound, 500, '파운드');

8-3. 프로미스(Promise)

• 제작 코드(producing code)는 원격에서 스크립트를 불러오는 것 같은 시간이 걸리는 일을 한다. 위의 비유에서는 '식당(맛집)’이 제작 코드에 해당한다.

• 소비 코드(consuming code)는 '제작 코드’의 결과를 기다렸다가 이를 소비한다. 이때 소비 주체(함수)는 여럿이 될 수 있다. 위 비유에서 소비 코드는 '손님’이다.

• 프로미스(promise) 는 '제작 코드’와 '소비 코드’를 연결해 주는 특별한 자바스크립트 객체이다. 위 비유에서 프라미스는 '알리미어플’이다. 프로미스는 시간이 얼마나 걸리든 상관없이 약속한 결과를 만들어 내는 '제작 코드’가 준비되었을 때, 모든 소비 코드가 결과를 사용할 수 있도록 해준다.

8-3-1. 프로미스의 특징

const promise = new Promise((resolve, reject) => {
	console.log("1번손님 들어오세요");//executor(제작코드,실행함수) = 맛집
});

const promise = new Promise((resolve, reject) => {
// promise가 만들어지면 executor함수는 자동으로 실행된다.
	setTimeout(()=>{
		resolve('입장해주세요');
	}, 3000);
}); // 3초후 일이 성공적으로 끝났다는 신호와 함께 result는'입장해주세요'가 된다.

const promise = new Promise((resolve, reject) => {
// 3초 뒤에 에러와 함께 실행이 종료되었다는 신호를 보낸다.
	setTimeout(()=>{
		reject(new Error('error');
	}, 3000);
}); 

const promise = new Promise(function(resolve, reject) {
  resolve("1번손님 입장해주세요");
  reject(new Error("~")); // 무시된다
  setTimeout(() => resolve("~")); // 무시된다
});

8-3-2. 소비함수 메서드(method): then, catch, finally

8-3-2-1. then

//제작코드(producing code)
const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
		resolve('입장해주세요');
	}, 3000);
});

//소비코드(consuming code)
promise.then(value => {
	console.log(value);
});

//제작코드(producing code)
const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject(new Error('손님의 입장순서가 아닙니다'));
	}, 3000);
});

//소비코드(consuming code)
promise.then(value => {
	console.log(value);
});

8-3-2-2. catch

//제작코드(producing code)
const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject(new Error('손님의 입장순서가 아닙니다'));
	}, 3000)
});

//소비코드(consuming code)
promise
	.then(value => {
		console.log(value);
	})
	.catch(error => {
	  console.log(error);
	});

8-3-2-3. finally

//제작코드(producing code)
const promise = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject(new Error('손님의 입장순서가 아닙니다'));
	}, 3000)
});

//소비코드(consuming code)
promise
	.then(value => {
		console.log(value);
	})
	.catch(error => {
	  console.log(error);
	})
	.finally(() => {
		console.log('-제주맛집');
	});

8-4. async function (async/await)

8-4-1. async function이란?

8-4-1-1. 등장배경

1. 특정 조건에 따라 분기를 나누기가 어렵다.

2. 어떤 부분에서 에러가 발생했는지 파악하기가 어렵다.

3. 프로미스 체이닝도 반복되면 가독성이 떨어져 .then 지옥이 발생할 가능성이 있다.

8-4-1-2. 특징

8-4-2. async 함수의 사용

8-4-2-1. async 함수 선언식으로의 사용

async function 함수이름() {
    return 결과 값;
}

async function snack() {
    return 1;
}

snack().then(alert); // '1' 반환

function snack() {
    return Promise.resolve(1);
}

snack().then(alert); // '1' 반환

8-4-2-2. async 함수 표현식으로의 사용

let snack = async function() {
		return "cake!";
};

// 또는 화살표 함수처럼 사용이 가능하다.
let snack = async () => {
		return "cake!";
};

snack().then((value) => console.log(value)) // cake!

// 아래와 같이 간단하게 줄여서 작성할 수 있다.
snack().then(console.log) // cake!

8-4-3. async & await 의 사용

8-4-3-1. async & await 사용 방법 및 특징

async function 함수이름() {
		await 비동기 처리 메서드 이름();
}

//또는 아래와 같이 사용한다.
const 함수이름 = async () ⇒ {
		await 비동기 처리 메서드 이름();
}

• await keyword는 반드시 async 함수 내부에서만 사용해야 하고 프로미스 앞에서 사용해야 한다. 만약 async 외부에서 사용하게되면 SyntaxError가 발생한다.

• 아래의 그림에서 보이는 것 처럼 await 키워드는 프로미스가 settled 상태(비동기 처리가 수행된 상태)가 될 때까지 대기하다가 settled 상태가 되면, 프로미스의 처리 결과를(resolved) 반환한다. 만약 프로미스 객체가 거부(rejected)된다면 이 때 ‘예외'가 발생하게 된다. 이 예외를 처리하는 방법 대해서는 9장 ‘예외처리’에서 살펴보도록 하자.

8-4-3-2. async & await 제어흐름의 이해

const snack = () => Promise.resolve('와, 맛있겠다!') // 4번

async function mySnack() {
		console.log('치즈 케이크 주세요!') // 3번
    const res = await snack() // 4번
    console.log(res) // 6번
}

console.log('주문하시겠어요?') // 1번
mySnack(); // 2번
console.log('주문하신 케이크 나왔습니다!') // 5번

'주문하시겠어요?'
'치즈 케이크 주세요!'
'주문하신 케이크 나왔습니다!'
'와, 맛있겠다!'

1. mySnack() 이라는 비동기 함수를 호출하고 mySnack() 의 body가 동작한다. console.log 를 호출하면서 '치즈 케이크 주세요!' 의 문자열이 출력되면 콜스택을 빠져나온다.

2. mySnack() 함수의 body 두 번째 라인인 snack()이 콜스택 안으로 들어가고 resolve 된 프로미스를 리턴한다. 프로미스가 resolve되고 snack()이 값을 리턴할 때, 엔진은 await 키워드를 마주친다!

3. 이 때, body의 실행이 멈추고 mySnack() 함수가 마이크로테스크 큐에서 대기하면 엔진은 비동기 함수에서 나와 console.log('주문하신 케이크 나왔습니다!') 를 출력한다.

4. 콜스택에 더이상 실행할 작업이 남아있지 않게 되면 이벤트 루프는 마이크로테스크에 남은 작업이 있는지 확인한다. 이 때, mySnack() 는 snack() 을 resolve 한 뒤에 자기의 차례를 기다리고 있었다는 것을 발견한다. mySnack() 은 다시 콜스택으로 들어가고 res 변수는 snack()이 리턴한 값인 ‘와, 맛있겠다!’를 전달받는다. 콘솔에 '와, 맛있겠다!'가 출력되고 콜스텍에서 빠져나온다.

5. 모든 작업이 끝난다.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

Ever had to deal with JS code that just... didn't run the way you expected it to? Maybe it seemed like functions got executed at random, unpredictable times, or the execution got delayed. There's a chance you were dealing with a cool new feature that ES6 introduced: Promises!

https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke#asyncawait

8-4-3-3. 실용예제

function cook(ms) {
		return new Promise(resolve => setTimeout(resolve, ms));
}

async function process() {
		console.log('스낵을 만드는 중입니다!');
		await cook(3000);
		console.log('스낵이 완성되었어요!');
}

process().then(() => {
		console.log('맛있게 드세요!');
});

'스낵을 만드는 중입니다!'
//3초 쉬고
'스낵이 완성되었어요!'
'맛있게 드세요!'

function cook(ms) {
		return new Promise(resolve => setTimeout(resolve, ms));
}

const myCake = async () => {
		await cook(1000);
		return '케이크';
};

const myCoffee = async () => {
	  await cook(500);
	  return '커피';
};
const myCookie = async () => {
	  await cook(5000);
	  return '쿠키';
};

async function asyncProcess() {
	  const cake = await myCake();
	  console.log(cake);
	  const coffee = await myCoffee();
	  console.log(coffee);
	  const cookie = await myCookie();
	  console.log(cookie);
}

asyncProcess(); 

케이크 // 1초
커피 // 0.5초
쿠키 // 5초

function cook(ms) {
		return new Promise(resolve => setTimeout(resolve, ms));
}

const myCake = async () => {
	  await cook(1000);
	  return '케이크';
};

const myCoffee = async () => {
	  await cook(500);
	  return '커피';
};
const myCookie = async () => {
	  await cook(5000);
	  return '쿠키';
};

async function promiseProcess() {
		const results = await Promise.all([myCake(), myCoffee(), myCookie()]);
	  console.log(results);
}

promiseProcess();  

['케이크', '커피', '쿠키']

function setTimeoutPromise(ms) {
    return new Promise((resolve, reject) => {
    setTimeout(() => resolve(), ms);
});
}

async function fetchTime(id) {
    await setTimeoutPromise(500);
    console.log(`${id} 님의 데이터가 준비되었어요!`);
    return Math.floor(Math.random() * 20) + 1;
}

async function asyncProcess() {
    let hours = [];
    for (let i = 1; i < 6; i++) {
        hours.push(fetchTime(i));
    }

    let result = await Promise.all(hours);

    console.log(
    `평균 공복시간은? : ${
        result.reduce((prevalue, currentvalue) => prevalue + currentvalue, 0) / result.length
    } 시간 입니다.`
    );
}

asyncProcess();

1 님의 데이터가 준비되었어요!
2 님의 데이터가 준비되었어요!
3 님의 데이터가 준비되었어요!
4 님의 데이터가 준비되었어요!
5 님의 데이터가 준비되었어요!
평균 공복시간은? : 8.2 시간 입니다.

function fetchUserId() {
		const userUrl = `https://jsonplaceholder.typicode.com/users/7`
    return fetch(userUrl).then(function(response) {
      return response.json();
    });
  }

function fetchUserTodo() {
    const todoUrl = `https://jsonplaceholder.typicode.com/todos/7`;
    return fetch(todoUrl).then(function(response) {
      return response.json();
    });
  }

async function getTodoTitle() {
    const user = await fetchUserId();
    console.log(user) // '7'번 사용자의 정보를 받아옴
	    if (user.id === 7) {
	      const todo = await fetchUserTodo();
	      console.log(todo.title); 
    }
  }
getTodoTitle(); // illo expedita consequatur quia in 출력

const usernames = ['1', '2', '3', '4'];

usernames.forEach(async (usernames) => {
		const result = await fetch(`https://jsonplaceholder.typicode.com/users/${usernames}`);
	  console.log(result.json());
});

console.log('user의 목록을 불러왔습니다!'); // forEach 반복문이 끝나기도 전에 'user의 목록을 불러왔습니다!'가 먼저 실행된다.

for await (variable of iterable) {
  statement
}

const usernames = ['1', '2', '3', '4'];

for await (let user of usernames) {
		const result = await fetch(`https://jsonplaceholder.typicode.com/users/${user}`);
	  console.log(result.json());
}

console.log('user의 목록을 불러왔습니다!'); // for 문을 다 돌고난 후 'user의 목록을 불러왔습니다!'가 출력된다!

8-5. Fetch

8-5-1. Ajax

8-5-2. fetch 함수란

8-5-2-1. fetch 함수의 기본 구조

const promise = fetch(resource, [options])

• 첫 번째 매개변수 (resource) : 필수 사항, HTTP 요청을 보낼 URL

• 두 번째 매개변수 (options) : 선택 사항, method, headers, body 등

8-5-2-2. fetch 함수 동작 과정

• status : 200 - 서버가 데이터를 찾음

• status : 404 - 서버가 데이터를 못 찾음 (not found)

HTTP 상태 코드 - 위키백과, 우리 모두의 백과사전

아래는 HTTP(하이퍼텍스트 전송 프로토콜) 응답 상태 코드의 목록이다. IANA가 현재 공식 HTTP 상태 코드 레지스트리 를 관리하고 있다. 모든 HTTP 응답 코드는 5개의 클래스(분류)로 구분된다. 상태 코드의 첫 번째 숫자는 응답의 클래스를 정의한다. 마지막 두 자리는 클래스나 분류 역할을 하지 않는다.

https://ko.wikipedia.org/wiki/HTTP_%EC%83%81%ED%83%9C_%EC%BD%94%EB%93%9C

• reponse.json() - JSON 형태로 반환

• response.text() - 텍스트 형태로 반환

• response.formData() - FormData 객체 형태로 반환

• response.blob() - 이진 데이터로 반환(주로 이미지, 오디오 등 멀티미디어 오브젝트를 다룰 때 사용)

• response.arrayBuffer() - ArrayBuffer(바이트로 구성된 배열) 형태로 반환

fetch('https://jsonplaceholder.typicode.com/users/3')

fetch('https://jsonplaceholder.typicode.com/users/3')
  .then(response => response.json())

fetch('https://jsonplaceholder.typicode.com/users/3') 
  .then(response => response.json())
  .then(json => console.log(json.email))

	//Nathan@yenseina.net

async function getUserEmail(id){
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const user = await(response.json());
  const email = user.email;
  console.log(email)
}
getUserEmail(3)

//Nathan@yesenia.net

const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);

const txt = fetch('https://reqres.in/api/products/3')
   .then(response => response.text())
   .then(text => console.log(text))

async function getImg(){
  const response = await fetch(`https://picsum.photos/200`);
  const blobImg = await(response.blob());
	console.log(blobImg);
}
getImg()

//Promise
//Blob {size: 19055, type: 'image/jpeg'}

async function printImg(){
  const response = await fetch(`https://picsum.photos/200`);
  const blobImg= await(response.blob());
	
	//blob을 담을 img 태그를 만든다.
	const img = document.createElement('img');
	//html body에 위에서 만든 img 태그를 삽입한다.
	document.body.append(img);
	//img 태그의 주소를 설정한다.
	img.src = URL.createObjectURL(blobImg);
}
printImg()

8-5-2-3. pollyfill

8-5-3. fetch 함수를 통한 HTTP 요청

const promise = fetch(resource, [options])

async function request() {
  const response = await fetch('url 기입',
  {
    method: "GET", //POST, DELETE, PATH, PUT
	  headers: {
			"Content-type": "콘텐츠 형태",
			//application/json, text/plain 등
		},
		body: JSON.stringify(
			서버에 전달할 데이터
		);
  });
  const data = await response.json();
  console.log(data);
}
request();

1. GET 요청
fetch()의 두 번째 매개변수를 생략하면 디폴트 값으로 GET 요청 메서드가 들어간다. GET 요청은 서버에서 데이터를 가져올 때 사용한다.
 

// async/await 패턴
async function get() {
  const response = await fetch('url 기입',
  {
    method: "GET",
  });
  const data = await response.json();
  console.log(data);
}
get();

// Promise 패턴
function get() {
  fetch('url 기입',{
    method: "GET",
  })
  .then(response => response.json())
  .then(json => console.log(json));
}
get()

 
GET 요청 방식을 이용하여 모든 user의 게시물들 목록을 출력하는 코드를 작성해보자.
 

async function get() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts',
  {
    method: "GET",
  });
  const data = await response.json();
  console.log(data);
}
get();

/*
[
	{
		'userId': 1,
		'id': 1,
		'title': ...,
		'body': ...
	},
	{
		'userId': 1,
		'id': 2,
		'title': ...,
		'body': ...
	},
	...
	{
		'userId': 2,
		'id': 1,
		'title': ...,
		'body': ...
	},
	...
]
*/

 
httpbin.org

https://httpbin.org/

async function get() {
  const response = await fetch('https://httpbin.org/get?name=hojun',
  {
    method: 'GET',
  });
  const data = await response.json();
  console.log(data);
}
get();

1. POST 요청
POST 요청은 데이터 생성을 요청할 때 사용한다. 생성할 내용을 2번째 인자 값 중 body에 넣어서 전달해주면 된다.
한 user당 하나의 게시글만 올릴 수 있는 서버가 있다고 하자. 이 서버의 3번 user의 게시물에 새로운 게시글을 추가하려고 한다. 새로운 게시글 콘텐츠는 이러하다. title은 ‘오늘의 간식’이고, 내용은 ‘고소미’이다.
 

async function post() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts',
  {
    method: "POST",
	  headers: {
			"Content-type": "application/json; charset=UTF-8",
		},
		body: JSON.stringify({ //문자열로 변환하지 않으면 에러발생
			"title": "오늘의 간식",
	    "body": "고소미",
	    "userId": 3
		})
  }
	);
  const data = await response.json();
  console.log(data);
}
post();

 
JSON.stringify() 메서드는 배열이나 객체를 JSON 포맷의 문자열로 변환해준다.
 

body: JSON.stringify({
			"title": "오늘의 간식",
	    "body": "고소미",
	    "userId": 3
		});

/* 
JSON.stringify 결과
{ 'title' : '오늘의 간식', 'body' : '고소미', userId': 3 }
*/

 
body에 담을 콘텐츠는 반드시JSON.stringify() 하여 JSON 문자열 형태로 변화해야 한다. 서버로 전송이 가능한 형태로 바꾸기 위해 문자열화 작업을 해줘야 하는데, 이를 직렬화라고 한다.
💡
객체(Object) → 문자열(string) : 직렬화(Serialization)
문자열(string) → 객체(Object) : 역직렬화(Deserialization)
GET을 사용하여 게시글 목록을 확인하면 POST요청을 보낸 새로운 콘텐츠가 생성되었음을 알 수 있다.
 

// 결과 예시
[
    {
      "userId": 2,
      "title": "이전 게시물",
      "body": "이전 게시물 입니다"
    },
    {
      "userId": 3,
      "title": "오늘의 간식",
      "body": "고소미"
    }
  ]

 
위의 결과 코드는 POST 요청의 결과를 보여주기 위해 만들어진 예시 코드이다. 예제에서 사용한 API는 free fake api로, 실제로 존재하는 서버가 아니기에 POST요청은 반영되지 않는다. 이번에는 직접 콘솔에서 테스트해볼 수 있는 코드를 살펴보도록 하자.
게시판에 게시물을 작성한다고 생각하고 post로 데이터를 전달해보았다. 다음 결과값처럼 제대로 전송이 된 것을 확인할 수 있다.
 

async function post() {
  const response = await fetch('https://httpbin.org/post',
  {
    method: "POST",
	  headers: {
			"Content-type": "application/json; charset=UTF-8",
		},
		body: JSON.stringify({
		  "title" : "게시물 제목",
	    "body" : "게시물 내용",
	    "userId" : "hojun",
		})
  }
	)
  const data = await response.json();
  console.log(data)
}
post()



 
 

2. DELETE 요청
리소스 삭제를 요청할 때 사용한다. 3번 user의 게시물을 모두 삭제하는 코드를 작성해보자.
 

async function Delete() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/3',
  { method: "DELETE"}
	);
  const data = await response.json();
  console.log(data);
}
Delete();

 
실제 테스트 할 수 있는 코드는 아래와 같다. 게시물 번호가 있다면 3번 게시물을 삭제하라는 명령이다.
 

async function deleteNotice() {
  const response = await fetch('https://httpbin.org/delete?noticeNumber=3',
  { method: "DELETE"}
	);
  const data = await response.json();
  console.log(data);
}
deleteNotice();



 

3. PUT 요청
리소스 업데이트를 요청할 때 사용한다. 만약 업데이트할 리소스가 없을 시, 새로운 리소스가 생성된다.
1번 user의 게시글 내용을 “고소미” → “마카다미아 쿠키”로 바꾸는 코드를 작성해보자. 게시글의 객체의 속성 값들을 모두 몸체에 기입하여 전송해야 한다. 만약 기입하지 않은 속성 값이 있다면 해당 value에는 null값이 들어간다.
 

async function put() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1',
  {
    method: "PUT",
	  headers: {
			"Content-type": "application/json; charset=UTF-8",
		},
		body: JSON.stringify({
			"title" : "오늘의 간식",
	    "body" : "마카다미아 쿠키",//업데이트할 내용
	    "userId" : 1 //1번 user
		})
  }
	);
  const data = await response.json();
  console.log(data);
}
put();

/*
결과 예시
{
    "userId": 1,
    "title": "오늘의 간식",
    "body": "마카다미아 쿠키"
 }
*/

 
테스트 할 수 있는 코드는 아래와 같다.
 

async function put() {
  const response = await fetch('https://httpbin.org/put?noticeNumber=3',
  {
    method: "PUT",
	  headers: {
			"Content-type": "application/json; charset=UTF-8",
		},
		body: JSON.stringify({
			"title" : "오늘의 간식",
	    "body" : "마카다미아 쿠키", //업데이트할 내용
	    "userId" : 1 //1번 user
		})
  }
	);
  const data = await response.json();
  console.log(data);
}
put();

 



 

4. PATCH요청
PATCH는 PUT과 마찬가지로 리소스를 업데이트 할 때 요청하는 요청 메서드 이다.
PUT은 전체 업데이트만 가능하여 속성 값들을 전부 body에 담아 요청을 보내야 한다. 이와 달리 PATCH는 부분 데이터만 업데이트가 가능하기 때문에 요청 몸체에 수정이 필요한 데이터만 담으면 된다.
1번 user의 게시글 내용을 “고소미” → “마카다미아 쿠키”로 바꾸는 코드를 작성해보자.
 

async function patch() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1',
  {
    method: "PATCH",
	  headers: {
			"Content-type": "application/json; charset=UTF-8",
		},
		body: JSON.stringify({
			"body" : "마카다이마 쿠키",
		});
  }
	);
  const data = await response.json();
  console.log(data);
}
patch();

/*
결과 예시
{
    "userId": 1,
    "title": "오늘의 간식",
    "body": "마카다미아 쿠키"
 }
*/

 
테스트 할 수 있는 코드는 아래와 같다.
 

async function patch() {
  const response = await fetch('https://httpbin.org/patch?noticeNumber=3',
  {
    method: "PATCH",
	  headers: {
			"Content-type": "application/json; charset=UTF-8",
		},
		body: JSON.stringify({
		"body" : "마카다미아 쿠키",
		})
  }
	);
  const data = await response.json();
  console.log(data);
}
patch();

 

Reference

1. https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke#asyncawait

2. https://caniuse.com/fetch

3. https://nodejs.org/api/url.html#url