最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

世界热点评！前端如何相对优雅管理api

来源：博客园

一般来说,项目由子模块组成,拿到后端提供过来的接口,一般也是按照子模块来分类提供的.请教一下各位,你们前端项目是如何管理api的?

希望各位贴点你们的优秀代码段上来学习学习.


(相关资料图)

常见:

各个模块的api存放到单独的js文件里,返回一个请求实例promise对象

使用的时候根据需求引入相应的请求方法

// axios/request.js 文件: /* 创建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" 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里
// 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",    },  },};
// axion/apis/my.js文件: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=>{ ... }) *//**// webpacklet requireApi = () => {  let allApi = require.context("./apis/", false, /\.js$/),      allApiFnObj = {};  allApi.keys().map((item) => {    allApiFnObj[item.replace(/(\.\/|\.js)/g, "")] = createApiFn(allApi(item).default);  });  return allApiFnObj;};*/// vitelet requireApi = () => {      let allApi = import.meta.globEager("./apis/*.js"),          allApiFnObj = {};      Object.keys(allApi).map((item) => {        const fileName = item.replace(/\.\/apis\/|\.js/g, "");        allApiFnObj[fileName] = createApiFn(allApi[item].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[key] && apis[key].url) {      obj[key] = (function (apiObj) {        /**         * args 请求入参         * config 请求配置相关信息,最终会传给实例axios.config         */        return function (args,config={}) {          return bindPromiseFn(apiObj, args, config);        };      })(apis[key]);    } else if ( apis[key] && !apis[key].url && Object.prototype.toString.call(apis[key]) === "[object Object]") {      obj[key] = createApiFn(apis[key]);    }  });  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[method](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=>{ ... })

关键词：