へっぽこびんぼう野郎のnewbie日記

けろけーろ(´・ω・`)! #vZkt8fc6J

JavaScriptのfetchでAPI叩いてjson取得時に、camelCaseとsnake_caseの変換マジだりぃわラップした話, yarn!

概要

nodeで書くとこんなかんじ。

whatwg-fetchなどを絡ませたい場合やES6で実装したい場合はこれを参考におのおの作ってください。

暇だったらnpmでインストールできるようにするかもしれないです(たぶんしない)

必要なもの

  • node-fetch
  • humps

Input

const emitMessage = (message, obj) => {
  console.log(`------------${message}----------------`)
  console.log(obj)
}

const fetch = require('node-fetch')
const humps = require('humps')

const Response = fetch.Response
Response.prototype.camelJson = function() {
  const json = this.json()
  return json.then(j => humps.camelizeKeys(j))
}

const humpsFetch = (uri, options) => {
  const isCheck = !!(options && options.headers)
  if (isCheck && options.body && options.headers['content-type'] === 'application/json') {
    options.body = humps.decamelizeKeys(options.body)
  }
  emitMessage('request', options.body)
  return fetch(uri, options)
}

const body = {
  'fooBar': 1,
  'mogeBar': {
    'sA': 1,
    'sB': 2
  }
}

const headers = {
  'content-type': 'application/json'
}


humpsFetch('https://raw.githubusercontent.com/harukaeru/KaeruTimer/master/package.json', { headers, body })
.then(response => response.camelJson())
.then(json => emitMessage('response.camelJson()', json))
.catch(e => console.error(e))

Output

------------request----------------
{ foo_bar: 1, moge_bar: { s_a: 1, s_b: 2 } }
------------response.camelJson()----------------
{ name: 'kaerutimer',
  version: '0.1.0',
  private: true,
  dependencies:
   { lodash: '^4.17.4',
     react: '^16.1.0',
     reactDom: '^16.1.0',
     reactRedux: '^5.0.6',
     reactRouter: '^4.2.0',
     reactRouterDom: '^4.2.2',
     reactScripts: '1.0.17',
     redux: '^3.7.2',
     reduxThunk: '^2.2.0',
     styledComponents: '^2.2.3',
     'timer.js': '^1.0.4' },
  scripts:
   { start: 'react-scripts start',
     build: 'react-scripts build',
     test: 'react-scripts test --env=jsdom',
     eject: 'react-scripts eject' } }

感想

  • なんだかんだprototype便利っていう
  • パフォーマンス落ちる気がする。あまりにもひどかったら別の手段考える