需要了解如何构建 javascript fetch API

Question

我正在创建一个以 django rest 框架为后端并以响应为前端的 Web 应用程序。我从 create-react-app 生成的反应应用程序。要进行 api 调用，我使用 fetch Api。我在我的 api 调用中看到了一些需要重构的重复。但我知道这里哪种模式更好。

代码如下：

Api.js

let _options = {headers: new Headers({'Content-Type': 'application/json'})}

const _url = {
  'users': '/api/users/',
  'obtain-token': '/api/obtain-token/',
  'verify-token': '/api/verify-token/',
  'refresh-token': '/api/refresh-token/'
}

const _fetch = (request) => {
  return fetch(request)
    .then(res => {
      if ( ! res.ok) {
        let err = {
          'status': res.status,
          'statusText': res.statusText,
          'data': {}
        }
        return res.json().then(
          data => {
            err.data = data
            return Promise.reject(new Error(JSON.stringify(err)))
          },
          () => Promise.reject(new Error(JSON.stringify(err)))
        )
      }

      return res.json()
    })
    .catch(err => {
      return Promise.reject(err)
    })
}

export const obtainToken = (username, password) => {
  const credential = {username, password}

  let options = _options
  options.method = 'POST'
  options.body = JSON.stringify(credential)

  const request = new Request(_url['obtain-token'], options)

  return _fetch(request)
}

export const verifyToken = (token) => {
  let options = _options
  options.method = 'POST'
  options.body = JSON.stringify({token})

  const request = new Request(_url['verify-token'], options)

  return _fetch(request)
}

export const refreshToken = (token) => {
  let options = _options
  options.method = 'POST'
  options.body = JSON.stringify({token})

  const request = new Request(_url['refresh-token'], options)

  return _fetch(request)
}

export const getUser = (username, token='') => {
  let options = _options
  options.method = 'GET'
  if (token) options.headers.append('Authorization', `JWT ${token}`)

  const request = new Request(`${_url['users']}/${username}`, options)

  return _fetch(request)
}

我喜欢这段代码的地方是，当我需要请求资源时，我只是运行一个带有所需参数的函数，而不知道它是 get 或 post 还是其他，我不需要传递 header 配置和 url。

// example api call
let token = '4346h9r7yt47t9...'

verifyToken(token)
  .then(data => {
    // server response json available here

    token = data.token
  })
  .catch(err => {
    // handle network error and bad response here

    console.log(err)
  })

我正在关注@challenge 解决方案。并设法缩短它：

// Change _build function name to makeRequest and export it
const makeRequest = (name, _url='', body=undefined, headers={}) => {
  let [method, url] = source[name]
  let options = {
     headers: new Headers({
       'Content-Type': 'application/json',
       ...headers,
     })
   }
  options.method = method
  if (body) options.body = JSON.stringify(body)
  return _fetch(url+_url, options)
}

export default makeRequest

但是，当然要调用这个函数，我需要提供附加的 url，如果需要，还需要一个自定义标题。但是随着这个项目的进行，证明需要附加 url（由用户详细资源使用）和 costum 标头（由需要身份验证的资源使用）。

Answer 1

let source = {
  'getUser': (..._p) => ['GET', `/api/users/${_p[0]}`, undefined, {'Authorization': `JWT ${_p[1]}`}],
  'obtainToken': (..._p) => ['POST','/api/obtain-token/', {username:_p[0], password:_p[1]}],
  'verifyToken': (..._p) => ['POST','/api/verify-token/', {token:_p[0]}],
  'refreshToken': (..._p) => ['POST', '/api/refresh-token/',{token:_p[0]}]
}


const requests = {}
Object.keys(source).forEach(key => {
  requests[key] = (...params) => {
    let [method, url, body, headers ={}] = source[key](...params)
    let options = {
       headers: new Headers({
         'Content-Type': 'application/json',
         ...headers,
       })
     }
    options.method = method
    if (body) options.body = JSON.stringify(body)
    return _fetch(new Request(url, options))
  }
})

export default requests

它需要更多的测试和审查..

Answer 2

let source = {
  'getUser': ['GET', '/api/users/'],
  'obtain-token': ['POST','/api/obtain-token/'],
  'verify-token': ['POST','/api/verify-token/'],
  'refresh-token':['POST', '/api/refresh-token/']
}

let _build = (name, _url, body, headers) => {
  let [method, url] = source[name]
  let options = {
     headers: new Headers({
       'Content-Type': 'application/json',
       ...headers,
     })
   }
  options.method = method
  if (body) options.body = JSON.stringify(body)
  return new Request(url+_url, options)
}

然后

export const obtainToken = (username, password) => {
  const credential = {username, password}
  const request = _build('obtainToken','', credential, {})
  return _fetch(request)
}
export const verifyToken = (token) => {
  const request = _build('verifyToken', '',{token}, {})
  return _fetch(request)
}

export const refreshToken = (token) => {
  const request = _build('refreshToken', '', {token}, {})
  return _fetch(request)
}
export const getUser = (username, token='') => {
  let headers = {'Authorization': `JWT ${token}`}

  const request = _build('getUser',`/${username}`, undefined, headers)
  return _fetch(request)
}

更多，而不是...

return new Request(url+_url, options)

在 _build 函数中，您可以将其替换为

return _fetch(new Request(url+_url, options))

这让你有这个：

   export const obtainToken = (username, password) => {
      const credential = {username, password}
      return _build('obtainToken','', credential, {})
    }
    export const verifyToken = (token) => {
      return _build('verifyToken', '',{token}, {})
    }

    export const refreshToken = (token) => {
      retun _build('refreshToken', '', {token}, {})
    }

    export const getUser = (username, token='') => {
      let headers = {'Authorization': `JWT ${token}`}
      return _build('getUser',`/${username}`, undefined, headers)
    }