API configuration

Why

In the use of redux or dva projects, we often write functions like the following service layer to make the code structure clearer, but it is easy to see that we will write a lot of similar code in antd -admin@5.0, using the more concise configuration method to achieve the same function.

export async function login(data) {
  return request({
    url: '/api/v1/user/login',
    method: 'post',
    data,
  })
}

Configuration and use

In the src/services/api.js file, you will see the following configuration object, the object's key is used to call the function name, the object's value is the requested url, the default request method is GET, The format of the value of the other request mode object is 'method url'.

export default {
  ...
  queryUser: '/user/:id',
  queryUserList: '/users',
  updateUser: 'Patch /user/:id',
  createUser: 'POST /user/:id',
  removeUser: 'DELETE /user/:id',
  removeUserList: 'POST /users/delete',
  ...
}

Used in other files

import { queryUser } from 'api'

// in the general file
...
queryUser(option).then(data => console.log(data))
...

/ / Model file
...
yield call(queryUser, option)
...

Method to realize

Refer to the src/services/index.js file to traverse the api configuration. Each property returns the corresponding encapsulated request function.

import request from 'utils/request'
import { apiPrefix } from 'utils/config'

import api from './api'

const gen = params => {
  let url = apiPrefix + params
  let method = 'GET'

  const paramsArray = params.split(' ')
  if (paramsArray.length === 2) {
    method = paramsArray[0]
    url = apiPrefix + paramsArray[1]
  }

  return function(data) {
    return request({
      url,
      data,
      method,
    })
  }
}

const APIFunction = {}
for (const key in api) {
  APIFunction[key] = gen(api[key])
}

module.exports = APIFunction