Front-end resource service layer with Fetch API

_Http.js

import {Notification} from 'element-ui'
import router from '@/router/index'

let authErrNotify
let networkErrNotify

let generateRequest = (options, params = undefined) => {
  const contentTypes = {
    json: 'application/json',
    form: 'application/x-www-form-urlencoded',
    file: 'multipart/form-data'
  }

  const acceptTypes = {
    json: 'application/json',
    image: 'image/webp,image/*,*/*;q=0.8'
  }

  let _body, _url

  // GET请求的request对象中不能出现body
  if (options.method.toUpperCase() === 'GET') {
    let paramsStr = ''
    if (params) {
      for (let [k, v] of Object.entries(params)) {
        paramsStr += `${k}=${v}&`
      }
      _url = `${options.url}?${paramsStr.substring(0, paramsStr.length - 1)}`
    } else {
      _url = options.url
    }
  } else {
    _url = options.url
    options.type === 'json' ? _body = JSON.stringify(params) : _body = params
  }

  let obj = {
    'Authorization': localStorage.access_token || '',
    'Content-Type': contentTypes[options.type],
    'Accept': acceptTypes[options.type],
    'Accept-Charset': 'utf-8',
    'mode': options.isCors ? 'cors' : 'no-cors' // 默认不跨域,一般可以无视此参数
  }

  let reqConfig = {
    method: options.method.toUpperCase(),
    headers: new Headers(obj),
    credentials: 'include', // 默认始终携带cookie
    cache: 'no-store'
  }

  !(options.method.toUpperCase() === 'GET') ? Object.assign(reqConfig, {body: _body}) : reqConfig

  return new Request(_url, reqConfig)
}

let wrapFetch = (options) => {
  return (params) => fetch(generateRequest(options, params))
    .then(res => {
      if (res.ok) {
        return res.json()
      } else {
        if (!networkErrNotify) {
          networkErrNotify = Notification.error({
            message: '网络错误',
            onClose () {
              networkErrNotify = undefined
            }
          })
        }
        throw new Error('network error')
      }
    })
    .then(function (json) {
      if (json.code === 0) {
        return json
      } else if (json.code === 401) {
        router.push('/portal')
        if (!authErrNotify) {
          authErrNotify = Notification.error({
            title: '登录已过期',
            message: '已经返回登录页面,请重新登录',
            onClose () {
              authErrNotify = undefined
            }
          })
        }
        throw new Error('用户未登录')
      } else {
        throw new Error(json.msg)
      }
    })
}

export default (configs) => {
  let resourceMethods = {}
  for (let [k, v] of Object.entries(configs)) {
    resourceMethods[k] = wrapFetch(v)
  }
  return resourceMethods
}

Auth.js

/**
 * resource services of Auth page
 */

import http from './_Http.js'

export default http({
  userInfo: {
    url: '/api/auth/get-user',
    type: 'json',
    method: 'get'
  },
  signIn: {
    url: '/api/auth/login',
    type: 'json',
    method: 'post'
  },
  signOut: {
    url: '/api/auth/logout',
    type: 'json',
    method: 'post'
  }
})