axiosClient的使用经验

你还在手撕http的Api吗？axiosClient让你的Api更简洁

介绍一款我最近一直在用的request Api，虽然很小众，但是很好用。当时leader推荐的原因是为了统一处理请求错误（然而感觉并没多少改善），以及传参方式的痛点的。

首先我们引入axios和axiosClient

js 复制代码

import axios from 'axios';
import AxiosClient from '@cn-src/axios-client';
import { message } from 'ant-design-vue';
import { getToken } from '/@/utils/auth';
import { useUserStore } from '/@/store/modules/user';
import { router } from '/@/router';
import { debounce } from 'lodash-es';
axios.interceptors.request.use(
  (config) => {
    if (config.url !== '/login') {
      const AccessToken = getToken(); 
      config.headers.Authorization = 'Bearer ' + AccessToken;
    }
    return config;
  },
  function (error) {
    return Promise.reject(error);
  },
); 
const axiosClient: any = new AxiosClient(axios, {
  baseURL: import.meta.env.DW_GLOB_API_URL,
  timeout: 5000,
  onCatch(_, error) {
    if (!error.response) {
      return debounce(message.error('服务暂不可用，请稍后再试!'), 400);
    }
    if (error.response.status === 401) {
      const userStore = useUserStore();
      userStore.setToken(undefined);
      userStore.setSessionTimeout(false);
      userStore.setUserInfo(null);
      router.push('/login');
    }
    return debounce(returnErrMessage(error), 400);
  },
  // 处理请求空值
  onGet: {
    onPre(req) {
      for (const key in req.params) {
        if (req.params[key] == undefined || req.params[key] == '' || req.params[key] == null) {
          delete req.params[key];
        }
      }
      return true;
    },
  },
});
function returnErrMessage(error) {
  message.error(error.response.data.message || error.response.statusText);
  return;
}

拦截器我们做了最简单的token拼接，登陆过期退出登录，请求参数不存在时不传参，以及对一些报错提示信息的处理，因为当用户在看板页面登录过期之后会有很多的报错提示所以我们加了lodash的debounce事件。

这些只是简单的一些处理，相信各位都有比我更好的方案来处理这些，接下来我们看看如何封装每个请求。

js 复制代码

export default {  
  getFunApi: axiosClient.get('/url......'), 
  postFunApi: axiosClient.post('/url......'), 
  uploadFunApi: axiosClient.postFormData('/url......'), 
  deleteFunApi: axiosClient.delete('/url/{id}'), 
  putFunApi: axiosClient.put('/url/{id}'),
  downLoadFunAPi: axiosClient.get('/url......', {
    responseType: 'blob',
  }),
};

没错，就那么简洁，是不是看起来一目了然，而且还可以拆分不同的模块；

那么我们看一下传参是如何进行传参的；

js 复制代码

//  首先引入我们的Api
  import Api from '@/api';
//  假如我们需要传递的参数值是 requestData
  const requestData = new Object({})
  
//  GET
  Api.getFunApi({ params: requestData }).then((res) => {
      console.log(res)
  });
  
//  POSAT
  Api.postFunApi({ data: requestData }).then((res) => {
      console.log(res)
  });
  
//  PUT
  Api.putFunApi({ data: requestData, pathVars: { id: idStr } }).then((res) => {
      console.log(res)
  });
  
//  DELETE
  Api.deleteFunApi({ pathVars: { id: idStr } }).then((res) => {
      console.log(res)
  });
  
//  POST_FORM_DATE
// 此时requestData是formData格式
  Api.downLoadFunAPi({ data: requestData }).then((res) => {
      console.log(res)
  });

然后我们也可以对一些比较简单的接口进行更加灵活的封装

js 复制代码

import { axiosClient } from '/@/modules/api/index';

export default {
  exportApiFun: (Api) => {
    return axiosClient.get(Api, {
      responseType: 'blob',
      timeout: 60000,
    });
  },
  uploadApiFun: (Api) => {
    return axiosClient.postFormData(Api, {
      timeout: 60000,
    });
  },
  getPageFun: (Api) => {
    return axiosClient.get(Api);
  }, 
  algorithm_execute: axiosClient.get('/algorithm/execute', {
  //  额外单独配置请求超时时间
    timeout: 60000,
  }),
  uploadHistory_table: async (params) => {
    const urlMap = {
      POI: 'POI',
      renkou: 'POPULATION',
      zhihui: 'GRID_SMART_FOOTPRINT_250',
      jichu: 'GRID_POLYGON_250',
      jiedao: 'GRID_LEVEL',
      quxian: 'GRID_POLYGON_COUNTY',
      GRID_REFRESH: 'GRID_REFRESH',
    };
    return await axiosClient.get('/uploadHistory/table')({
      params: {
        tableType: urlMap[params],
      },
    });
  },
};