前端如何相對優雅管理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=>{ ... })
 */

/**
// webpack
let requireApi = () => {
  let allApi = require.context("./apis/", false, /\.js$/),
      allApiFnObj = {};
  allApi.keys().map((item) => {
    allApiFnObj[item.replace(/(\.\/|\.js)/g, "")] = 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[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=>{ ... })

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546357.html

標籤：JavaScript

上一篇：webgl 系列 —— 變換矩陣和影片

下一篇：第127篇:異步函式(async和await)練習題(異步,訊息佇列)