Fetch & Axios

1. Fetch 시작하기

1.1 Fetch 등장 배경

1.2 Fetch 사용 이유

2. Fetch 문법

2.1 Response 프로퍼티와 메서드

2.1.1 Response 프로퍼티와 메서드를 설명하기 앞선 간략한 promise 설명 예제

let promise = fetch('연습 url')

console.log(promise)

2.1.2 Response 프로퍼티와 메서드를 설명하기 앞선 간략한 then 함수 설명 예제

let promise = fetch("연습 URL").then(function (response) {
    console.log(response);
});

2.1.3 Response property에 대한 설명과 예제

• Response.body - 읽을 수 있는 스트림의 내용을 의미한다.

• Response.bodyUsed - Response.body 내용을 읽었는지를 확인하는 boolean 값이다. 2.1.2 예제에서는 연습의 body 내용을 읽지 못했지만 2.1.3 예제에서는 blob()이라는 메서드를 사용해 true의 값이 반환되는 것을 볼 수 있다. blob() 메서드는 스트림을 가져와 완료할 때까지 읽어 반환하는 메서드이다.

let promise = fetch("연습 url").then(function (response) {
    console.log(response);
    response.blob();
});

• Response.header - Response와 연결된 headers의 객체이다.

• Response.ok - 응답이 성공했는지 범위의 상태 여부를 나타내는 boolean 값이다. HTTP 상태 코드가 200~299 사이일 경우 true를 나타내고 응답이 실패했을 경우 false를 나타낸다.

• Response.redirect - 응답이 새 URL로 리디렉션하고 새 URL을 지정하였는지 상태 여부를 나타내는 boolean 값이다.

• Response.status - HTTP 상태 코드를 의미한다. 값은 짧은 숫자로 설정되어 있다. 범위는 아래와 같이 되어 있지만 자세한 것은 [1]MDN 공식 문서와 HTTP파트의 응답 부분을 참고하길 바란다.
1) Informational responses (100-199)
2) Successful responses (200-299)
3) Redirection messages (300-399)
4) Client error responses (400-499)
5) Server error responses (500-599)

• Response.StatusText - 상태 코드에 해당하는 메세지를 의미한다.

• Response.Type - 응답 Type을 의미한다. 예로 basic과 col, opaque가 있다. 이것은 리소스의 출처를 나타내며 응답 객체를 처리하는 방법을 알려주는 것에 사용할 수 있다.

• Response.url - 응답 url이다.

2.1.4 Response method란?[2]

• Response.json() - 응답된 본문의 텍스트를 JSON 형식으로 파싱한다.

• Response.text() - 응답된 본문을 읽고 텍스트 형식으로 반환한다.

• Response.redirect(url, status) - URL로 redirection하는 결과를 반환한다. url은 새 응답이 시작되는 URL이다. 괄호 속에 들어가는 status는 응답에 대한 코드이다.

• Response.formData() - 응답된 것을 formData 형식으로 반환한다.

• Response.blob() - 스트림을 가져와 완료할 때까지 읽어 반환하는 메서드이다.

• Response.arrayBuffer() - 응답된 것을 arrayBuffer 형식으로 반환한다.

• Response.clone() - 다른 변수에 저장되는 응답 객체의 복제본을 만든다.

• Response.error() - 네트워크 오류와 관련된 응답의 새로운 객체를 반환한다.

2.2 fetch() 메서드

2.2.1 fetch()의 기본적인 사용방법

fetch(url)
fetch(new Request() 로 생성된 request 객체)
fetch(url, [options])

fetch("https://jsonplaceholder.typicode.com/posts/1");

const request = new Request("https://jsonplaceholder.typicode.com/post/1");

fetch(request)

fetch("https://jsonplaceholder.typicode.com/posts",{
	method: "POST",
	headers: "Content-Type": "application/json",
	body: {
		title: "foo",
		body: "bar",
		userId: 1
	}
});

2.2.2 Request() 생성자

const myRequest = new Request(input, init);

const myRequest = new Request("https://jsonplaceholder.typicode.com/posts/1", {
	headers: {
		"Content-Type": "application/json",
	},
});

fetch(myRequest)
	.then(res => res.json())
	.then(data => console.log(data));

const copyRequest = new Request(myRequest);

2.2.3 fetch()의 options

fetch(RequestInfo input, optional RequestInit init = {})

req = new Request("https://jsonplaceholder.typicode.com/posts");

let headers = new Headers({
	"Content-Type": "text/xml"
});
// 객체 리터럴을 생성자에 전달해서 생성할 수 있다

headers.append["Content-Type","application/json"]
// 메소드들을 이용해 추가, 제거, 조회 등이 가능하다

fetch("https://jsonplaceholder.typicode.com/posts",{headers});
// url과 options 에 생성한 headers 객체를 넣어서 fetch 요청

3. Fetch 사용해보기

❗실습 전 참고사항

실습용 API 사이트 이용 방법

{
	userId: 1,
	id: 1,
	title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
	body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto",
}

브라우저 콘솔창으로 성공 확인 방법

실습시 사용할 fetch()의 기본 구조

fetch("https://jsonplaceholder.typicode.com/posts",{
	method: "POST",
	headers: "Content-Type": "application/json",
	body: {
		title: "foo",
		body: "bar",
		userId: 1
	}
});

{
	method: "GET/POST/PUT/PATCH/DELETE 중 택일", // 사용하고자 하는 메서드의 이름을 명시
  headers:, // 서버에 전송할 데이터에 대한 정보를 작성
  body:, // 서버에 전송할 데이터를 작성
}

3.1 GET 요청

3.1.1 GET이란?

3.1.2 사용방법

fetch(API_url, {method: "GET"})

3.1.3 실습 예제

function getData(url = "") {
	fetch(url, {
		method: "GET",
		headers: {
			"Content-Type": "application/json",
		},
	})
	.then((res) => res.json())
	.then((res) => console.log(res))
	.catch((error) => console.log(error.message));
}

getData("https://jsonplaceholder.typicode.com/posts/1");

async function getData(url = ""){
  try{
    const response = await fetch(url);
    const res = await response.json();  
    console.log(res);
  }
  catch(error){
		console.log(error);
	}
}

getData("https://jsonplaceholder.typicode.com/posts/1");

async function getData(url = "") {
  try {
    const response = await fetch(url, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    });
    return response.json();
  } catch (error) {
    console.log(error.message);
  }
}

getData("https://jsonplaceholder.typicode.com/posts/1", {
}).then((data) => {
  console.log(data);
});

3.2 POST 요청

3.2.1 POST란?

3.2.2 사용 방법

fetch(API_url, {method: "POST", body: 데이터})

3.2.3 실습 예제

{
  title: "Post test",
	body: "fetch의 Post 메소드를 테스트 중입니다.",
	userId: 2,
}

function postData(url = "", data = {}) {
    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    })
		.then((res) => res.json())
		.then((res) => console.log(res))
	  .catch((error)=>console.log(error.message));
}

postData("https://jsonplaceholder.typicode.com/posts", {
  title: "Post test",
	body: "fetch의 Post 메소드를 테스트 중입니다.",
	userId: 2,
});

async function postData(url = "", data = {}) {
  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    const res = await response.json();
		console.log(res);
  } catch (error) {
    console.log(error.message);
  }
}

postData("https://jsonplaceholder.typicode.com/posts", {
  title: "Post test",
  body: "fetch의 Post 메소드를 테스트 중입니다.",
	userId: 2,
})

async function postData(url = "", data = {}) {
  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    return response.json();
  } catch (error) {
    console.log(error.message);
  }
}

postData("https://jsonplaceholder.typicode.com/posts", {
  title: "Post test",
  body: "fetch의 Post 메소드를 테스트 중입니다.",
	userId: 2,
}).then((data) => {
  console.log(data);
});

3.3 PUT 요청

3.3.1 PUT이란?

3.3.2 PUT의 사용 방법

{
  method: "PUT", // “PUT”라고 메서드의 이름을 명시
  headers:, // 서버에 전송할 데이터의 양식을 "Content-Type"으로 명시
  body:, // 서버에 전송할 데이터를 작성
}

async function postData(url = "", data = {}) {
	try {
		const response = await fetch(url, {
			method: "POST",
			headers: {
				"Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    return response.json();
  } catch (error) {
    console.log(error.message);
  }
}

postData("https://jsonplaceholder.typicode.com/posts", {
  title: "Post test",
  body: "fetch의 Post 메소드를 테스트 중입니다.",
  userId: 2,
}).then((data) => {
  console.log(data);
});

async function putData(url = "", data = {}) {
  try {
    const response = await fetch(url, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    return response.json();
  } catch (error) {
    console.log(error.message);
	}
}

putData("https://jsonplaceholder.typicode.com/posts/1", {
  id: 1,
  title: "Put test",
  body: "fetch의 Put 메소드를 테스트 중입니다.",
  userId: 1,
}).then((data) => {
  console.log(data);
});

3.3.3 실습 예제

function putData(url = "", data = {}) {
    fetch(url, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    })
		.then((res) => res.json())
		.then((res) => console.log(res))
	  .catch((error)=>console.log(error.message));
}

putData("https://jsonplaceholder.typicode.com/posts/1", {
  id: 1,
	title: "Put test",
	data: "fetch의 Put 메소드를 테스트 중입니다.",
	userId: 1,
});

async function putData(url = "", data = {}) {
	 try {
    const response = await fetch(url, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    const res = await response.json();
		console.log(res);
  } catch (error) {
    console.log(error.message);
  }
}

putData("https://jsonplaceholder.typicode.com/posts/1", {
  id: 1,
	title: "Put test",
	data: "fetch의 Put 메소드를 테스트 중입니다.",
	userId: 1,
});

async function putData(url = "", data = {}) {
  try {
    const response = await fetch(url, {
      method: 'PUT',
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    return response.json();
  } catch (error) {
    console.log(error.message);
	}
}

putData("https://jsonplaceholder.typicode.com/posts/1", {
  id: 1,
  title: "Put test",
  body: "fetch의 Put 메소드를 테스트 중입니다.",
  userId: 1,
}).then((data) => {
  console.log(data);
});

3.4 PATCH 요청

3.4.1 PATCH란?

3.4.2 사용방법

fetch(API_url,{method: "PATCH"})

3.4.3 실습 예제

function patchData(url = "", data = {}) {
	fetch(url, {
		method: "PATCH",
		headers: {
			"Content-Type": "application/json",
		},
		body: JSON.stringify(data),
	})
	.then((res) => res.json())
	.then((res) => console.log(res))
	.catch((error)=>console.log(error.message));
}

patchData("https://jsonplaceholder.typicode.com/posts/1", {
	title: "Patch test",
});

fetch("https://jsonplaceholder.typicode.com/posts/1", {
        method: "PATCH",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          title: "fetch_patch test",
        }),
      })
        .then((response) => response.json())
        .then((data) => console.log(data));

async function patchData(url = "", data = {}) {
	try {
		const response = await fetch(url, {
			method: "PATCH",
			headers: {
				"content-type": "application/json"
			},
			body: JSON.stringify(data),
		});
		const res = await response.json();
		console.log(res);
	} catch (error) {
		console.log(error);
	}
}

patchData("https://jsonplaceholder.typicode.com/posts/1", {
	title: "Patch test",
});

async function patchData(url = "", data = {}) {
  try {
    const response = await fetch(url, {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    return response.json();
  } catch (error) {
    console.log(error.message);
  }
}

patchData("https://jsonplaceholder.typicode.com/posts/1", {
  title: "Patch test",
}).then((data) => {
  console.log(data);
});

3.5 DELETE 요청

3.5.1 DELETE란?

3.5.2 사용방법

fetch(API_url, {method:"DELETE"})

3.5.3 예제

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

function deleteData(url = "") {
    fetch(url, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      },
    })
		.then((res) => res.json())
		.then((res) => console.log(res))
	  .catch((error)=>console.log(error.message));
}

deleteData("https://jsonplaceholder.typicode.com/posts/1");

async function deleteData(url = "") {
	try {
		const response = await fetch(url, {
			method: "DELETE",
			headers: {
        "Content-Type": "application/json",
      },
		});
		const res = await response.json();
		console.log(res);
	} catch (error) {
		console.log(error.message);
	}}

deleteData("https://jsonplaceholder.typicode.com/posts/1");

async function deleteData(url = "") {
  try {
    const response = await fetch(url, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    });
    return response.json();
  } catch (error) {
    console.log(error.message);
	}
}

deleteData("https://jsonplaceholder.typicode.com/posts/1")
.then((data) => {
  console.log(data);
});

4. Fetch를 통한 API를 불러오는 방법

4.1 API란 무엇일까?

4.2 API 호출하기

"https://jsonplaceholder.typicode.com/posts"

let response = fetch("https://jsonplaceholder.typicode.com/posts");
// response라는 변수는 다음과 같다 -> let response: Promise<Response>

let response = fetch("https://jsonplaceholder.typicode.com/posts")
	.then((res) => console.log(res));

async function getData() {
  let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
}

async function getData() {
  let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
  let jsonResponse = await rawResponse.json();
  console.log(jsonResponse);
}

getData();

4.3 GET, POST 사용해보기

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(response => response.json())
  .then(data => console.log(data))

1. fetch를 이용해 todos의 1번 객체 데이터를 불러온다.

2. then 메서드를 통해 응답 값을 json 형식으로 변환한다.

3. then 메서드를 통해 그 값(data)을 console에 출력한다.

fetch("https://jsonplaceholder.typicode.com/posts", {
    method: 'POST',
    headers:{
			"Content-Type" : "application/json"
		},
    body: JSON.stringify({
        title: "foo",
        body: "bar",
        userId: 1,
    })
})

fetch("https://jsonplaceholder.typicode.com/posts", {
    method: 'POST',
    headers:{"Content-Type" : "application/json"},
    body: JSON.stringify({
        title: "foo",
        body: "bar",
        userId: 1,
    })
  })
	.then(res => res.json())
  .then(data => console.log(data))

5. Fetch 성공 여부 확인 및 에러처리

5.1 Fetch 성공 여부 확인

fetch("https://jsonplaceholder.typicode.com/no-exist")
	.then(() => console.log("ok"))
	.catch(() => console.log("error"));

// GET https://jsonplaceholder.typicode.com/no-exist 404
// ok

fetch("https://jsonplaceholder.typicode.com/no-exist")
	.then(response => {
		if (!response.ok) throw new Error("404 or 500 error");
		return response.json();
	})
	.then(users => console.log(users))
	.catch(error => console.log(error));

// GET https://jsonplaceholder.typicode.com/no-exist 404
// Error: 404 or 500 error

fetch("https://jsonplaceholder.typicode.com/no-exist")
	.then(response => {
		if (!response.ok) return console.log(response);
	})

5.2 에러 처리

try {
	// (1) 에러가 발생할 수 있는 코드
} catch (error) {
	// (2) 에러 발생 시 코드
} finally {
	// (3) 무조건 한번 실행되는 코드
} 

// 이후 동작

function follower() {
    const followerCount = 100;
    
    try {
        followerCount = 150;          // 변경할 수 없는 값 수정 시도
				console.log('skip');          // 실행되지 않음
    } catch(e) {
        console.error(e);             // 에러내용 확인
    } finally {
				return followerCount + 1;     // 무조건 한번 실행
		}
};

follower();

// TypeError: Assignment to constant variable.
// 101

6. 요청객체를 생성하고 전송하기

6.1. Request() 생성자로 생성한 요청 객체를 인자로 전달

6.1.1 Request() 생성자

const myRequest = new Request(input, init);

const myRequest = new Request("https://jsonplaceholder.typicode.com/posts/1", {
	headers: {
		"Content-Type": "application/json",
	},
});

fetch(myRequest)
	.then(res => res.json())
	.then(data => console.log(data));

6.1.2 왜 써야할까?

const copyRequest = new Request(myRequest);

7. Axios 시작하기

7.1 Axios 사용 이유

7.1.1 Axios 정의

7.1.2 Axios 사용 이유

7.2 Axios와 Fetch의 차이

7.2.1 Axios와 Fetch에 대해서

7.2.2 Axios와 Fetch의 기능 차이

JSON 데이터 변환

const url = "https://jsonplaceholder.typicode.com/todos/1";

fetch(url)
  .then((response) => response.json())
  .then(console.log);

const url = "https://jsonplaceholder.typicode.com/todos/1";

axios(url)
	.then((response) => console.log(response.data));

자동 문자열 반환

async function putData(url = '', data = {}, token = '') {
  try {
    const response = await fetch(url, { //1️⃣
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
         Authorization: token,
      },
      body: JSON.stringify(data), //2️⃣
    });
    return response.json();
  } catch (error) {
    console.log(error);
	}
}

putData("https://jsonplaceholder.typicode.com/posts/1", {
  id: 1,
  title: "Put test",
  body: "fetch의 Put 메소드를 테스트 중입니다.",
  userId: 1,
}).then((data) => {
  console.log(data);
});

async function putData(url = '', data = {}, token = '') {
  try {
    const response = await axios(url, { //1️⃣
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
         Authorization: token,
      },
      data: data, //2️⃣
    })
		.then((response) => console.log(response.data));
  } catch (error) {
    console.log(error);
	}
}

putData("https://jsonplaceholder.typicode.com/posts/1", {
  id: 1,
  title: "Put test",
  body: "axios의 Put 메소드를 테스트 중입니다.",
  userId: 1,
}).then((data) => {
  console.log(data);
});

7.2.3 Request 취소 및 Timeout 설정

const url = "https://jsonplaceholder.typicode.com/todos/2";

axios
  .get(url, {
    timeout: 10, // 요청이 0.01초이상 걸리면 종료하고 error 띄우기
  })
  .then((response) => console.log(response.data))
  .catch((error) => {
    console.log(error.message);
  });

const url = "https://jsonplaceholder.typicode.com/todos/2";

const abortcontroller = new AbortController();
const signal = abortcontroller.signal;
setTimeout(() => abortcontroller.abort(), 10);

fetch(url, {
	signal: signal,
})
  .then((response) => response.json())
  .then(console.log)
  .catch((err) => {
	  console.error(err.message);
  });

7.2.4 브라우저 지원

7.2.5 Axios와 Fetch 중 어떤 것을 써야 할까

7.3 Axios 시작하기

7.3.1 Node.js 개발 환경에서 설치/사용

npm install axios 

yarn add axios

7.3.2 브라우저 환경에서 설치/사용

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

8. Axios 문법

8.1 Axios API

axios(config)
axios(url, [config])
axios.요청메서드(url, [, data[,config]])

axios({
	method: "get",
	url: "https://jsonplaceholder.typicode.com/post/1",
  ... (추가하고 싶은 옵션들)
})

axios("https://jsonplaceholder.typicode.com/posts/1",{
	method: "get",
})

axios.get("https://jsonplaceholder.typicode.com/posts/1",{
	data(POST, PUT, PATCH 만) , {config}
}

8.1.1 요청 config 옵션들

axios({
	url: "https://jsonplaceholder.typicode.com/post/1"
})

axios({
method: "get",
url: "/posts/1",
baseURL : "https://jsonplaceholder.typicode.com"
})
// 이렇게 baseURL 을 주고 url 로 다른 경로를 주면 url로 대체된다.
axios({
method: "get",
url: "https://jsonplaceholder.typicode.com/posts/1",
baseURL : "https://jsonplaceholder.typicode.com"
})

headers: {'Content-Type': 'application/json'}

axios({
	method: "POST",
	url: "https://jsonplaceholder.typicode.com/posts"
	headers : {
		"Content-Type" : "application/json",
	},
	data: (업로드할 데이터) // 위에 설명한 유형 중 하나여야 한다.
})

8.1.2 Config 전역 기본값 설정

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.common['Authorization'] = 'test';
	axios({
	  url: "/posts/1"
	}).then(response => console.log(response));

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
	axios({
	  url: "https://mandarin.api.weniv.co,kr/user"
	}).then(response => console.log(response));

const instance = axios.create({
	baseURL: "https://jsonplaceholder.typicode.com"
});
instance.defaults.timeout = 2500;
instance.get('/posts/1').then(response => console.log(response));

const instance = axios.create({
	baseURL: "https://jsonplaceholder.typicode.com"
});
instance.defaults.timeout = 2500;
instance.get('/posts/1',{
	timeout: 4000
}).then(response => console.log(response));

8.2 Axios 응답 스키마

8.2.1 요청했을 때 응답 스키마 종류 및 예제 [1]

const getData = () => {
	axios
		.get("https://exampleURL/user")
		.then(function (response) {
			console.log(response);
	});
};

getData();

• config : 요청을 위한 Axios가 제공하는 구성이다.

• data : 서버가 제공하는 응답 데이터이다.

• headers : HTTP 헤더이다. 모든 헤더 이름은 소문자이고, 괄호 표기법으로 접근이 가능하다. 예로 response.headers["content-type"]

• request : 응답으로 생성된 요청이다. node.js에서 마지막 ClientRequest 인스턴스고 브라우저에서 XMLHttpRequest이다.

• status : status는 HTTP 상태 코드이다. HTTP 상태 코드는 HTTP 공식 문서[2] 또는 앞선 HTTP 응답 부분을 확인바란다.

• statusText : HTTP 상태 코드에 대한 메세지이다.

9. Axios 사용해보기

9.1 GET 요청

9.1.1 Axios의 GET이란?

9.1.2 사용 방법

axios({
  method: "GET",
  url: "url",
});

axios.get(url[, config]) 

axios.get("연결하고자 하는 서버 주소", request header)

9.1.3 실습 예제

axios({
		method: "get",
		url: "https://jsonplaceholder.typicode.com/posts/1",
		headers: {
        "Content-Type": "application/json",
      },
	})
  .then(function (response) {
		console.log(response);
  })
	.catch(function(error){
		console.log(error);
	})

axios.get("https://jsonplaceholder.typicode.com/posts/1",{
  headers: {
      "Content-Type": "application/json",
    },
  }
)
	.then(function(response){
		console.log(response);
})
	.catch(function(error){
		console.log(error);
})

async function axiosGet() {
	try{
		const response= await axios.get("https://jsonplaceholder.typicode.com/posts/1",{
		  headers: {
	      "Content-Type": "application/json",
	      }
     })
		  console.log(response);
    }
    catch (error){
      console.log(error);
		}
	}
axiosGet();

async function getData(url='') {
	try {
		const response = await axios(url, {
			method: 'get'
		});
		console.log(response);
		return response;
	} catch (error) {
		console.log(error);
	}
}

getData("https://jsonplaceholder.typicode.com/posts/1")
	.then((response) => {
		console.log(response);
	});

9.2 POST 요청

9.2.1 Axios의 POST란?

9.2.2 사용 방법

axios({
  method: "POST", // 요청 방법
  url: "url", // 요청할 서버 주소
	data: { } // 서버에 POST하고자 하는 데이터
});

axios.post(url[, data[, config]])

axios.post("요청할 서버 url", 서버에 POST하고자 하는 데이터, request 헤더)

9.2.3 실습 예제

const postTestData = {
    title: "Post test",
		body: "axios의 Post 메소드를 테스트 중입니다.",
		userId: 2,
};

axios({
		method: "post",
		url: "https://jsonplaceholder.typicode.com/posts/",
		headers: {
        "Content-Type": "application/json",
      },
		data: postTestData,
	})
	.then(function (response) {
		console.log(response);
	.catch(function(error){
		console.log(error)
	})

axios.post("https://jsonplaceholder.typicode.com/posts/",
	postTestData,
	{headers: {
		"Content-Type": "application/json",
		},
	})
	.then(function (response) {
		console.log(response)
	})
	.catch(function (error) {
		console.log(error)
	})

async function axiosPost() {
	try {
		const response = await axios.post("https://jsonplaceholder.typicode.com/posts", 
			postTestData, 
			{headers: {
				"Content-Type": "application/json",
				},
		});
		console.log(response.data);
	} catch (error) {
		console.error(error.message);
	}
}

axiosPost();

async function axiosPost2(){
	try {
	const response = await axios.post("https://jsonplaceholder.typicode.com/posts", postTestData);
	console.log(response.data);
	console.log(response.headers["content-type"]); // "application/json;charset=utf-8"
} catch(error){
	console.error(error.message);
}


axiosPost2();

async function postData(url="", data={}) {
	try {
		const response = await axios.post(url, data);
		console.log(response);
	} catch (error) {
		console.log(error);
	}
}

postData("https://jsonplaceholder.typicode.com/posts", postTestData)
.then((response) => {
		console.log(response);
});

• 전송하고자 하는 데이터가 이미지 혹은 영상인 경우

imgConfig = {
	headers: {
	'content-type': 'multipart/form-data'
	}
}

const result = await axios.post('url', formData 객체에 담긴 이미지 데이터, imgConfig);

9.3 PUT 요청

9.3.1 Axios의 PUT이란?

9.3.2 사용방법

axios({
  method: "PUT", // 전송 방법
  url: "url", // 연결하고자 하는 서버 주소
  data: {data}, // 전송하고자 하는 데이터
}).then(function (response) {
    // response Action
});

axios.put(url[, data[, config]])

axios.put("연결하고자 하는 서버 주소", Put하고자 하는 data, request header])

9.3.3 실습 예제

axios({
		method: "PUT",
		url: "https://jsonplaceholder.typicode.com/posts/1",
		data: {
		  id: 1,
		  title: "Put test",
		  data: "axios의 Put 메소드를 테스트 중입니다.",
		  userId: 1,
		}
  })
  .then(function (response) {
		console.log(response);
  })
	.catch(function(error){
		console.log(error)
})

axios.put("https://jsonplaceholder.typicode.com/posts/1",{
  id: 1,
  title: "Put test",
  body: "axios의 Put 메소드를 테스트 중입니다.",
  userId: 1,
})
	.then(function(response){
		console.log(response)
    return response;
})
	.catch(function(error){
		console.log(error)
})

async function axiosPut() {
	try{
    const response= await axios.put("https://jsonplaceholder.typicode.com/posts/1",{
      id: 1,
      title: "Put test",
      body: "axios의 Put 메소드를 테스트 중입니다.",
      userId: 1,
    })
    console.log(response);
    return response;
  }
  catch (error){
    console.log(error);
  }
}

 axiosPut();

async function putData(url = "", data = {}) {
	try {
    const response = await axios
      .put(url, data,
      {
        headers: {
          'Content-Type': 'application/json',
       })
      console.log(response.data)
      return response;
  }
   catch (error) {
    console.log(error);
  }
}

putData("https://jsonplaceholder.typicode.com/posts/1", {
  id: 1,
  title: "Put test",
  body: "axios의 Put 메소드를 테스트 중입니다.",
  userId: 1,
})
	.then((data) => {
	  console.log(data);
	});

9.4 PATCH 요청

9.4.1 Axios의 PATCH란?

9.4.2 사용방법

axios({
  method: "PATCH", // 전송 방법
  url: "url", // 연결하고자 하는 서버 주소
  data: {data}, // 전송하고자 하는 데이터
})

axios.patch(url[, data[, config]])

axios.patch("연결하고자 하는 서버 주소", Patch하고자 하는 data, request header])

9.4.3 예제

axios({
  method: "patch",
  url: "https://jsonplaceholder.typicode.com/posts/1",
  headers: {
    "Content-Type": "application/json",
  },
  data: { title: 'patch 테스트 입니다." },
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios
  .patch("https://jsonplaceholder.typicode.com/posts/1", {
    headers: {
      "Content-Type": "application/json",
    },
    title: "patch 테스트입니다.",
  })
  .then(function (res) {
    console.log(res);
  })
  .catch(function (error) {
    console.log(error);
  });

async function axiosPatch() {
  try {
    const response = await axios.patch(
      "https://jsonplaceholder.typicode.com/posts/1",
      {
        headers: {
          "Content-Type": "application/json",
        },
        title: "patch 테스트 입니다.",
      }
    );
console.log(response);
  } catch (error) {
    console.log(error);
  }
}

axiosPatch();

async function patchData(url = "", data = {}) {
    try {
      const response = await axios.patch(url, data);
      console.log(response);
			return response;
    } catch (error) {
      console.log(error);
    }
}

  patchData("https://jsonplaceholder.typicode.com/posts/1", {
    title: "patch 테스트 입니다.",
  }).then((response) => {
    console.log(response);
  });

9.5 DELETE 요청

9.5.1 Axios의 DELETE란?

9.5.2 사용방법

axios({
	method: "delete",  // 전송 방법 "delete"
	url: "url",  // 연결하고자 하는 서버 주소
}).then(function (response) {
	// response Action
});

axios.delete(url[, config])

axios.delete("연결하고자 하는 서버 주소", request header)

axios.delete("url", {
	data: {
		data...
	}
})
	.then(function (response) {
	console.log(response);
})
	.catch(function (error) {
	console.log(error);
})

9.5.3 실습 예제

axios({
	method: "delete",  // "delete" 메서드의 이름을 명시
	url: "https://jsonplaceholder.typicode.com/posts/1",  // 1번 posts에 대한 요청
  headers: {
		"Content-Type": "application/json",
	},
})
	.then(function (response) {  // 응답
		console.log(response); 
	});

axios.delete("https://jsonplaceholder.typicode.com/posts/1",
	headers: {
		"Content-Type": "application/json",
	},
)
	.then(function (response) {  
		console.log(response);  // 성공 응답 출력
	})
	.catch(function (error) {  
		console.log(error);  // 에러 응답 출력
	})

async function DeleteAxios() {
	try {
		const response = await axios.delete("https://jsonplaceholder.typicode.com/posts/1",
		headers: {
        "Content-Type": "application/json",
      },
		);
		console.log(response);
	} catch (error) {
		console.log(error);
	}
}

async function DeleteData(url = "", data = {}) {
        try {
            const response = await axios(url, {
                method: "delete",
            });
            console.log(response);
            return response;
        } catch (error) {
            console.log(error);
        }
    }

    DeleteData("https://jsonplaceholder.typicode.com/posts/1", {
        id: 1,
    }).then((response) => {
        console.log(response);
    });

10. Axios 성공 여부 확인하기, 에러 처리

10.1 Axios 성공 여부 확인하기

axios.get("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => {
    console.log(response);
  })
  .catch((error) => console.error(error));

axios.get("https://jsonplaceholder.typicode.com/wrong")
  .then((response) => {
    console.log(response);
  })
  .catch((error) => console.log(error));

10.2 에러 처리

axios.get("https://jsonplaceholder.typicode.com/wrong")
  .then((response) => {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.get("https://jsonplaceholder.typicode.com/wrong")
  .then((response) => {
    console.log(response);
  })
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.status);
    } else if (error.request) {
      console.log(error.request);
    } else {
			console.log(error.message);
    }
  });

axios({
  method: "get",
  timeout: 1,
  url: "https://jsonplaceholder.typicode.com/posts/1",
	})
  .then((response) => {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
	});

11. 참고자료

1.[1] https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Basic_concepts 2.1.[1] https://developer.mozilla.org/en-US/docs/Web/HTTP/Status 2.1.[2] https://developer.mozilla.org/en-US/docs/Web/API/Response 2.2.[1] https://fetch.spec.whatwg.org/#fetch-method 2.2.[2] https://fetch.spec.whatwg.org/#headers-class 2.2.[3] https://fetch.spec.whatwg.org/#request-class 3.1.[1] https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch 3.1.[2] https://jsonplaceholder.typicode.com/ 3.2.[1] https://developer.mozilla.org/ko/docs/Web/HTTP/Methods/POST 3.4.[1] https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch 3.4.[2] https://jsonplaceholder.typicode.com/ 3.5.[1] https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch 3.5.[2] https://jsonplaceholder.typicode.com/ 4.[1] https://en.wikipedia.org/wiki/API 4.[2] https://jsonplaceholder.typicode.com/ 7.1.[1]https://axios-http.com/kr/docs/intro 7.1.[2] CSRF - 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행동(수정, 삭제, 등록 등)을 하여 특정 웹사이트에 요청하게 하는 공격을 말한다. 7.3.[1] https://axios-http.com/kr/docs/intro 8.1.[1] https://github.com/axios/axios/blob/v1.x/lib/defaults/index.js 8.1.[2] https://jsonplaceholder.typicode.com/ 8.1.[3] https://github.com/axios/axios/blob/v1.x/lib/defaults/index.js 8.2.[1] https://axios-http.com/kr/docs/res_schema 8.2.[2] https://developer.mozilla.org/en-US/docs/Web/HTTP/Status 9.2.[1] https://developer.mozilla.org/ko/docs/Web/API/FormData