Axios & Ajax 활용

💡 서버랑 통신하기
클라이언트는 서버에게 요청을 보내고, 응답을 받아온다.

요청을 보낼 땐?

• 미리 약속한 주소로 (url)
• 어떤 요청을 보낸다. (type)
• 필요하다면 서버가 일하기 위해 필요한 자료와 (data)
• 누가 요청했는 지 알려주면 된다. (auth) → 토큰을 전달해주면 누가 요청했는 지 서버가 알 수 있겠죠!

Ajax

1. jquery의 ajax로 요청 보내기

   $.ajax({
   	url: "", // 미리 약속한 주소
   	type: "POST", // 어떤 요청을 보낼 지 (GET, POST, PUT, DELETE 등!)
   	data: {cat_name: "perl"}, // 서버가 필요로 하는 데이터를 넘겨주고
   	headers: {
   		Authorization: 'Bearer ' + token // 누가 요청했는 지 알려준다. (토큰 전달!)
   	}
   });

Axios

💡 Axios
axios는 HTTP 비동기 통신 라이브러리입니다.
React 외에도 굉장히 많이 사용하는 라이브러리예요. 🙂

제가 설명드릴 기본적인 사용법 외에도 많은 기능을 가지고 있으니, docs(링크)도 읽어보면 굳!

1. 설치하기

   yarn add axios

2. 요청 보내기

   import axios from "axios";
   
   // axios는 axios.요청타입으로 요청을 보낼 수 있어요. 이 방식을 별칭 메서드라고 불러요.
   // 예시)
   // axios.get(url, config)
   // axios.post(url, data, config)
   
   // 어떤 요청을 보낼 지, 별칭 메서드 사용
   axios.post('/cat', // 미리 약속한 주소
   	{name: 'perl', status: 'cute'}, // 서버가 필요로 하는 데이터를 넘겨주고,
   	{headers: { 'Authorization': '내 토큰 보내주기' },} // 누가 요청했는 지 알려줍니다. (config에서 해요!)
   ).then(function (response) {
       console.log(response);
     })
     .catch(function (error) {
       console.log(error);
     });

3. axios 객체를 생성했다면 이를 활용해서 기능별 api 객체도 만들어 관리해보세요.

export const authApi = {
    // e.g) 회원 가입
    signup: someData =>
        instance.post("api/user", {
					someData: someData,
					someOtherData: someOtherData
        }),

    // e.g) 유저 프로필 변경
    editUserProfile: (someData) =>
        instance.put(`api/user/${userId}`, { 
					someData: someData,
					someOtherData: someOtherData
 }),

+) 조금 더 잘 써먹기

💡 axios 객체를 전역으로 만들면, 매번 헤더나 url 전체를 설정해주지 않아도 됩니다!

+) 전역으로 만든 객체에서는 더 다양한 일을 할 수 있어요. 요청을 보내기 전에 같은 요청이 가진 않았나 확인한다거나 요청에 실패하면 잽싸게 가로채서 재요청을 보낼수도 있답니다.(인터셉터라고 해요!) 😉

1. 전역으로 axios 객체 만들기
   • shared/Request.js

     import axios from "axios";
     
     ...
     
     const instance = axios.create({
     	baseURL: "요청보낼 서버 도메인" // 요청을 www.aa.com/user로 보낸다면, www.aa.com까지 기록
     });
     
     // 가지고 있는 토큰 넣어주기!
     // 로그인 전이면 토큰이 없으니 못 넣어요.
     // 그럴 땐 로그인 하고 토큰을 받아왔을 때 넣어줍시다.
     instance.defaults.headers.common["Authorization"] = USER_TOKEN; 
     
     export default instance;

2. axios 객체 써먹기
   • redux/modules/someModule.js

     import instance from "../../shared/Request";
     
     ...
     
     // 어떤 미들웨어
     const getSomeData = () => {
     	return function(dispatch){
     
     		// 만들어둔 instance에 보낼 요청 타입과 주소로 요청합니다. 
     		instance.get("/some").then((res) => {
     			//요청이 정상적으로 끝나고 응답을 받아왔다면 수행할 작업!
     		}).catch(err => {
     			// 요청이 정상적으로 끝나지 않았을 때(오류 났을 때) 수행할 작업!
     			console.log("에러 났어!");
     		})
     	}
     }

💡 앗, 데이터를 넘겨주는 법은 어떻게 하면 좋을까요?
맞아요! 위에서 .post()를 사용할 때 2번째 인자로 데이터를 넘겨주었죠! 😄 
어떤 걸 쓸 때 몇 번째 파라미터로 넘겨줘야 한다같은 정보는 모두 공식문서에 있어요. 공식문서를 꼭 읽고 axios를 잘 써먹어봅시다! (링크)

1. axios 객체로 작성하는 서버 요청 함수들을 기능별로 묶어서 관리해보세요.
   • src/shared/api

export const authApi = {
    // e.g) 회원 가입
    signup: someData =>
        instance.post("api/user", {
					someData: someData,
					someOtherData: someOtherData
        }),

    // e.g) 유저 프로필 변경
    editUserProfile: (someData) =>
        instance.put(`api/user/${userId}`, { 
					someData: someData,
					someOtherData: someOtherData
 }),

export const postApi = {
    // e.g) 회원 가입
    getPost: () =>
        instance.get("api/posts"),

    // e.g) 유저 프로필 변경
    editPosts: (someData) =>
        instance.put(`api/post/${postId}`, { 
					someData: someData,
					someOtherData: someOtherData
 }),