高阶函数 通过代理劫持实现API配置化函数生成

在前端的过程, 随着项目需求的增大，使用大量API 在定义方法过程 出现了大量的冗杂的代码, 因此实现一个中间件函数实现通过AI配置实现接口方法尤为必要。

// API文件 
  export default {
     userInfo: {
         method: 'GET',
         url: '/api/userInfo'
     },
     login: {
         method: 'post',
         url: 
     }
  }

 // 单文件的形式
  import axios from 'xxx',
  import API from './API'
  
  // 通过proxy 代理模式实现对API数据劫持, 
  const api = new Proxy(API, {
      get(target, key) {
        const handler = target[key]
        // 在请求劫持的搓成中我们要抛出一个函数来动态传递参数
        return (...args) => {
          // 在页面中传递参数后 核心代码只有这一句 返回一个promise，使用await
          return axios[handler.method](handler.url, ...args) 
        }
      }
  })
  export.default = api
  
  
  // 如果在开发过程中 我们API过多需要分页，因此在代理的时候需要进行合并处理
  
  import axios from 'xxx',
  import API from './API'
  import customizeAPI from './customizeAPI'
  
  // 通过proxy 代理模式实现对API数据劫持
  const api = new Proxy(Object.assigin(API. customizeAPI), {
      get(target, key) {
        const handler = target[key]
        // 高阶函数的返回在页面中可以实现我们动态的传递参数
        return (...args) => {
          return axios[handler.method](handler.url, ...args) 
        }
      }
  })
  export.default = api
  
  // 或者使用高级函数 这些都是思路 由你决定
  function common(API, customize = {})
    return  new Proxy(Object.assigin(API. customizeAPI), {
      get(target, key) {
        const handler = target[key]
        // 高阶函数的返回在页面中可以实现我们动态的传递参数
        return (...args) => {
          return axios[handler.method](handler.url, ...args) 
        }
      }
  })
  export.default = common(API, customize)
  

// 按需引入的方式
import { userInfo } from './api'
methods: {
    async handeleUserInfo () {
    let {code. data} = await userInfo({
        <!--params-->
    )
}


// 全局引入的方式
import API from './API'
Vue.prototype.API = API

method: {
    async handeleUserInfo () {
    let {code. data} = await this.API.userInfo({
        <!--params-->
    )
}

• 这样我们在项目中可以对我们的接口灵活配置 我们只需要分割我们接口的文件夹， 不需要关注定义方法文件，使用起来就很方便了

• 最最主要的，谢谢阅读和支持， 后续会持续更新一些实用性小操作

• 前端小伙伴们 大家一起努力