TIL 20211012[航海9927日]

Axiosのインストール

Axiosの基本的な使い方

HTTPメソッド別名

Axiosを使う方が便利な方法

import axios from 'axios';

const instance = axios.create({
  // 기본적으로 우리가 바라볼 서버의 주소
  baseURL: 'http://localhost:4000/',
  //headers에는 나중에 토큰을 넣어도되고 원하는 방식으로 활용 가능
  headers: {
    'content-type': 'application/json;charset=UTF-8',
    accept: 'application/json',
  },
});

export const apis = {
  // baseURL을 미리 지정해줬기 때문에 함수의 첫 번째 인자에 들어가는 url은
  // http://localhost:4000/ + 내가 작성한 url 즉 예시로
  // getPost함수에서는 instance.get('http://localhost:4000/posts')로 요청을 보내게 됩니다.
  // get과 delete의 경우 두 번째 인자에 데이터를 담아 보낼수 없기 때문에 서버에 데이터를 보낼경우 
  쿼리를 이용하여 보내주도록 합니다.

  // 게시물 불러오기
  getPost: () => instance.get('/posts'),
  // 게시물 작성하기
  createPost: (contents) => instance.post('/posts', contents),
  // 게시물 수정하기
  editPost: (id, content) => instance.put(`/posts/${id}`, content),
  // 게시물 삭제하기
  delPost: (id) => instance.delete(`/posts/${id}`),
};

Jason-server

テストと練習に使用!

Jason-serverの使い方

json-serverを使用して作成したサーバのAxiosの例

import React, { useEffect, useState } from 'react';
import './App.css';
import { apis } from './axios';
// 위에서 만든 axios를 모듈화한 apis를 불러와줍니다.

function App() {
  const [list, setList] = useState([]);
  
  useEffect(() => {
  // 페이지가 렌더될때 처음에 1번 서버에 요청하여 데이터를 받아옵니다.
  // 저희가 미리 만들어둔 모듈이 있기때문에 apis.getPost()를 실행하면 서버에 요청을 보내게 됩니다.
  // 추가로 then과 catch문을 통해 성공,실패 로직을 구현해주시면 됩니다.
  // 서버에서 받아오는 데이터들이 궁금하다면 response를 console.log 한 번 찍어서 살펴보세요 !
  
    apis
      .getPost()
      .then((res) => {
        const post = res.data;
        setList(...list, post);
      })
      .catch((err) => {
        console.error(err);
      });
  }, []);
  
  return (
    <div className='App'>
      {list &&
        list.map((item) => {
          return (
            <div key={item.id}>
              <h2>{item.title}</h2>
              <p>{item.body}</p>
            </div>
          );
        })};
    </div>
  )
}

export default App;

Redux-ThunkによるAPI通信

Redux-Thunk+Axios GET使用例

import { createAction, handleActions } from 'redux-actions';
import { produce } from 'immer';
import { apis } from '../lib/axios';

// action 생성
const LOAD_POST = 'LOAD_POST';

// actions creators
const loadPost = createAction(LOAD_POST, (list) => ({list}));

// middleware func
const getPostMiddleware = () => {
   return (dispatch) => {
   
   // redux-thunk를 활용한 middleware 함수 입니다.
   // 우선 앞에서 만든 axios모듈을 통해 getPost()를 실행시켜줍니다.
   // response를 받아온 data를 post_list 상수에 넣어줍니다.
   // 위에 만든 loadPost 액션 함수에 인자로 post_list를 넣어주고 dispatch 시킵니다.
   // 그러면 받아온 데이터를 redux에 담게 되겠죠 ?
   
    apis
      .getPost()
      .then((res) => {
        const post_list = res.data;
        dispatch(loadPost(post_list));
      })
      .catch((err) => {
        console.error(err);
      });
  };
};

// reducer
export default handleActions(
  {
    [LOAD_POST]: (state,action) =>
      produce(state, (draft) => {
        draft.list = action.payload.list;
      }),
  },
  initialState
);

const postCreators = {
  getPostMiddlewrae
};

export { postCreators };

知っていれば良い方法です!