梁小倩 发表于 2023-3-9 23:46:11

前端如何相对优雅管理api

一般来说,项目由子模块组成,拿到后端提供过来的接口,一般也是按照子模块来分类提供的.请教一下各位,你们前端项目是如何管理api的?
希望各位贴点你们的优秀代码段上来学习学习.
 
常见:
各个模块的api存放到单独的js文件里,返回一个请求实例promise对象
使用的时候根据需求引入相应的请求方法
// axios/request.js 文件:<br>
/* 创建axios请求实例,并返回实例 代码就不贴上来了*/// axios/apis/home.js 文件:

import request from "../request";
//获取菜单
export function getHomeNav(params) {
return request({
   url: "/api/home/getNav",
   params: params
   });
}
//获取热门新闻
export function getHotNewsList(params) {
   return request({
   url: "/api/home/getHotNewsList",
   params: params
   });
}// axios/apis/my.js 文件:

// 获取用户信息
export function getUserInfo(params) {
   return request({
   url: "/api/get/user/info",
   params: params
   });
}
// 更新用户信息
export function updateUserInfo(params) {
   return request({
   url: "/api/post/user/update",
   data: params
   });
}// 使用文件:
import { getHomeNav, getHotNewsList } from '@/axios/apis/home.js'<br> import { getUserInfo, updateUserInfo} from '@/axios/apis/home.js' getHomeNav({}).then(res=>{
    console.log(res)
}); 
个人在某个项目上,烦透了在使用的时候一个个api请求方法引入.花了点时间,改成了所有api直接挂在一个全局变量上.牺牲了点性能,但是使用起来爽歪歪的感觉.
假如axios/apis/home.js文件:
export default {
    //获取菜单
    nav: {
      url: "/api/home/getNav",
      method: "get",
      config:{timeout:50000} // 会覆盖到axios实例的config对应的属性
    },
    body: {
      //getHotNewsList
      getHotNewsList: {
            url: "/api/home/getHotNewsList",
            method: "get",
      },
      //getList
      getList: {
            url: "/api/home/getList",
            method: "get",
      },
    },
}; 全局引入所有API:
 import requireApi from '@/axios/index.js'
 const APIS  = requireApi();
 home里的api调用可以这样:
 APIS.home.nav({page:1,sizePages:20}).then(res=>{ ... })
 APIS.home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })
假如另外有一个my的模块api,使用起来可以这样:
APIS.my.xxxx().then(res=>{ ... });
 下面是实现代码段:// 假如目前有两个模块的api,分别存放在home.js,my.js里<br>// axios/apis/home.js文件:<br>export default {
//获取菜单
nav: {
    url: "/api/home/getNav",
    method: "get",
    config:{timeout:50000} // 会覆盖到axios实例的config对应的属性
},
body: {
    //getHotNewsList
    getHotNewsList: {
      url: "/api/home/getHotNewsList",
      method: "get",
    },
    //getList
    getList: {
      url: "/api/home/getList",
      method: "get",
    },
},
};// axion/apis/my.js文件:<br>export default {
// 获取用户信息
getUserInfo: {
    url: "/api/get/user/info",
    method: "get",
},
// 更新用户信息
updateUserInfo: {
    url: "/api/post/user/update",
    method: "post",
},
}; 
 
// axios/index.js 文件:

import createApiFn from "./createApiFn";
/**
*把api文件夹下的所有Api文件require进来,在逐个export出去
*假如axios/apis/home.js文件:
      export default {
            //获取菜单
            nav: {
                url: "/api/home/getNav",
                method: "get",
                config:{timeout:50000} // 会覆盖到axios实例的config对应的属性
            },
            body: {
                //getHotNewsList
                getHotNewsList: {
                  url: "/api/home/getHotNewsList",
                  method: "get",
                },
                //getList
                getList: {
                  url: "/api/home/getList",
                  method: "get",
                },
            },
      };

*按需求引入:
*import { home } from '@/axios/index.js'
*home.nav({page:1,sizePages:20}).then(res=>{ ... })
*home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })
*
*全局引入所有API:
*import requireApi from '@/axios/index.js'
*const APIS= requireApi();
*APIS.home.nav({page:1,sizePages:20}).then(res=>{ ... })
*APIS.home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })
*/

/**
// webpack
let requireApi = () => {
let allApi = require.context("./apis/", false, /\.js$/),
      allApiFnObj = {};
allApi.keys().map((item) => {
    allApiFnObj = createApiFn(allApi(item).default);
});
return allApiFnObj;
};
*/

// vite
let requireApi = () => {
      let allApi = import.meta.globEager('./apis/*.js'),
          allApiFnObj = {};
      Object.keys(allApi).map((item) => {
      const fileName = item.replace(/\.\/apis\/|\.js/g, '');
      allApiFnObj = createApiFn(allApi.default);
      });
      return allApiFnObj;
    };

export default requireApi;

// 需要手动把各个模块export出去
let { home, my } = requireApi();
export { home, my }; 
// axios/createApiFn.js文件:

import requestInstance from "./request";

const bindPromiseFn = (apiObj, args, config={}) => {
const params = {
    method: apiObj.method || "get",
    url: apiObj.url,
    params: args,
    config: apiObj.config || {},
};
params.config = {
    ...params.config,
    ...config
}
return requestInstance(params);
};
/**
* 把apis对象转变成以字段名为方法名的对象
* 如:
* apis={
*   getDemo:{
*      url:"xxxx",
*      method: "get"
*   },
*   postDemo:{}
* }
* 执行方法后返回对象结构如下:
* {
*getDemo:function(){},
*postDemo:function(){}
* }
* @param {object} apis
*/
const createApiFn = (apis) => {
var obj = {};
Object.keys(apis).map((key) => {
    if (apis && apis.url) {
      obj = (function (apiObj) {
      /**
         * args 请求入参
         * config 请求配置相关信息,最终会传给实例axios.config
         */
      return function (args,config={}) {
          return bindPromiseFn(apiObj, args, config);
      };
      })(apis);
    } else if ( apis && !apis.url && Object.prototype.toString.call(apis) === "") {
      obj = createApiFn(apis);
    }
});
return obj;
};

export default createApiFn; 
// axios/request.js 文件:

import axios from "axios";

// 创建axios实例
const axiosInstance = (config = {}) => {
const _config = {
    // baseURL: `${location.protocol}//${process.env.VUE_APP_BASE_API}`, //`baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
    timeout: 30000,
};
config = {
    ..._config,
    ...config
};
return axios.create(config);
};

const requestInstance = (args) => {
let { method, url, params, config = {} } = args;
if (!url) {
    return;
}
if (method === "get") {
    params = { params: params };
}

const instance = axiosInstance(config);

instance.interceptors.request.use(
    (config) => {
      // config.headers["x-auth-token"] = getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
);

instance.interceptors.response.use(
    (response) => {
      const { status, statusText, data } = response
      if (status === 200 || status === 304) {
      return Promise.resolve(data);
      } else {
      return Promise.reject(statusText || "Error");
      }
    },
    (error) => {
      return Promise.reject(error);
    }
);

debugger;
return instance(url, params, config);
};

export default requestInstance; 
//全局引入所有API使用方法:
import requireApi from '../axios/index'
const API= requireApi();
API.my.updateUserInfo({name:'xiaomou'}).then(res=>{
      console.log(res);
})
APIS.home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... })

//按需求引入方法:
import { home } from '@/axios/index.js'
home.body.getHotNewsList({page:1,sizePages:20}).then(res=>{ ... }) 
 
 
  

来源:https://www.cnblogs.com/xiaomou2014/p/17200411.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 前端如何相对优雅管理api