Util List made by abelko

[livelikeabel]

Description

• object to param

  • Sometimes we make url with parameters from object data.

• async state

  • Easily manage status that pending, success, failure at asynchronous request

  example.js (Vanilla)

  import asyncState, { PENDING, SUCCESS, FAILURE } from './index.js';
  
  class Example {
      constructor() {
          this.myFetchStatus = asyncState();
          // myFetchStatus
          // {
          //   pending: false,
          //   success: false,
          //   failure: false,
          // }
      }
  
      getData() {
          this.myFetchStatus = asyncState(PENDING)
          // myFetchStatus
          // {
          //   pending: true,
          //   success: false,
          //   failure: false,
          // }
          fetch('http://test/data')
              .then(res => {
                  this.myFetchStatus = asyncState(SUCCESS)
                  // myFetchStatus
                  // {
                  //   pending: false,
                  //   success: true,
                  //   failure: false,
                  // }
                  return res.json()
              })
              .catch(err => {
                  this.myFetchStatus = asyncState(FAILURE)
              });
      }
  
      renderExample() {
          const { myFetchStatus } = this;
          const el = document.getElementById('example');
  
          if(myFetchStatus.PENDING) {
              return el.innerHTML = 'Please wait...'
          }
          if(myFetchStatus.SUCCESS) {
              return el.innerHTML = 'Data request successful!'
          }
          if(myFetchStatus.FAILURE) {
              return el.innerHTML = 'Data request failure 😥'
          }
      }
  }

  Use with React

  import React, { Component } from 'react';
  import asyncState, { PENDING, SUCCESS, FAILURE } from './index.js';
  
  class Example extends Component {
      state = { myFetchStatus: asyncState() };
  
      getData() {
          this.setState({myFetchStatus: asyncState(PENDING)});
           fetch('http://test/data')
              .then(res => {
                  this.setState({myFetchStatus: asyncState(SUCCESS)});
                  return res.json()
              })
               .catch(err => {
                  this.setState({myFetchStatus: asyncState(FAILURE)});
              });
           this.myFetchStatus = asyncState(PENDING);
      }
      render() {
          const { myFetchStatus } = this.state;
          if(myFetchStatus.PENDING) {
              return (<p>Please wait...</p>)
          }
          if(myFetchStatus.SUCCESS) {
              return (<p>Data request successful!</p>)
          }
          if(myFetchStatus.FAILURE) {
              return (<p>Data request failure 😥</p>)
          }
      }
  }

  It's better to use it in the Redux.

  import asyncState, { PENDING, SUCCESS, FAILURE } from './index.js';
  
  const exampleReducer = (state, action) => {
    switch (action.type) {
      case EXAMPLE_PENDING:
        return {
          ...state,
          status: asyncState(PENDING)
        };
      case EXAMPLE_SUCCESS:
        return {
          ...state,
          status: asyncState(SUCCESS)
        };
      case EXAMPLE_SUCCESS:
        return {
          ...state,
          status: asyncState(SUCCESS)
        };
      default:
        return state;
    }
  };

  This util be available at React, Angular, Vue!

• script loader

  • When we want to dynamically import scripts.

일정

계획	날짜
개발	7/17
리뷰

테스트 코드

• 추후 작성 예정
• 작성 완료