前端之使用柯里化规范接口请求

1. 介绍

1. 当后端接口规范化的时候，我们如果一个一个的写会显得写代码的人很呆。举个例子

import { request } from 'umi'
export const goodsUpdate = (data: any) => request('/goods/update', {
  method: 'post',
  requestType: 'json',
  data
})
export const goodsList = (params: any) => request('/goods/list', {
  method: 'get',
  requestType: 'json',
  params
})
export const goodsAdd = (data: any) => request('/goods/add', {
  method: 'post',
  requestType: 'json',
  data
})
export const goodsDelete = (data: any) => request('/goods/delete', {
  method: 'post',
  requestType: 'json',
  data
})


export const orderUpdate = (data: any) => request('/order/update', {
  method: 'post',
  requestType: 'json',
  data
})
export const orderList = (params: any) => request('/order/list', {
  method: 'get',
  requestType: 'json',
  params
})
export const orderAdd = (data: any) => request('/order/add', {
  method: 'post',
  requestType: 'json',
  data
})
export const orderDelete = (data: any) => request('/order/delete', {
  method: 'post',
  requestType: 'json',
  data
})

如果只是这样是不是感觉还能接受？那如果上面操作重复了10次呢？50次呢？或者上百次呢？此时此刻我是无法接受的，复制粘贴也是很累人的。

2. 本文主要目的就是以柯里化的形式简化抽成上面的代码
3. 柯里化简单介绍一下：无论传入什么，满足以下条件的则是了。

/*
 * 实现 fn(a)(b)(c) = f(a, b)(c) = f(a)(b, c) =  f(a, b, c)
 */

4. 本文柯里化函数引至 lodash

实现

1. src/utils/request.ts

import { request } from 'umi'
import _ from 'lodash';
const obj: any = {
  post: 'data',
  get: 'params'
}
const requestNormal = _.curry((type: string, method: string, url: string, data: any) => {
  const config: any = {
    method: method.toLocaleLowerCase(),
    requestType: 'json',
  }
  obj[config.method] ? config[obj[config.method]] = data : void 0;
  return request(`${url}/${type}`, config)
})

export const reqFn = requestNormal

export const add = requestNormal('insert', 'post')
export const edit = requestNormal('update', 'post')
export const list = requestNormal('query', 'post')
export const del = requestNormal('delete', 'post')

2. src/api/service.ts

import { list, add, edit, del, reqFn } from '@/utils/request'

const goodsUrl = '/goods'
export const goodsAdd = add(goodsUrl)
export const goodsEdit = edit(goodsUrl)
export const goodsList = list(goodsUrl)
export const goodsDel = del(goodsUrl)

const orderUrl = '/order'
export const goodsAdd = add(orderUrl)
export const goodsEdit = edit(orderUrl)
export const goodsList = list(orderUrl)
export const goodsDel = del(orderUrl)

// .....

3. 使用

import { goodsList } from '@/api/service.js'
const params = {
	goodsName: 'goods'
}
goodsList(params).then(({ data }) => {
	console.log(data)
})

注意： 使用的时候必须传递参数！ 否则会返回一个待接受参数的函数而不是Promise函数。

总结

1. 之所以商品和订单在同一个api文件中是为了举例子。不纠结