axios 请求接口封装

在项目开发中对于axios 的请求后台接口，获取数据，进行统一封装，对结果进行
统一处理。减少代码冗余，方便维护，废话不多说，进入正题开始axios封装。

一，设置请求体，请求格式

http.js 文件
import axios from 'axios';
import qs from 'qs';
//引入路由，在结果返回时，统一处理
import * as Routers from '../routers';
//常用的cookie 操作，自定义，这里就不贴出来了，自己封装就好
import { Cookie } from '../commons/tools';

const http = axios.create({});

//设置请求格式
http.defaults.headers = {
  'Content-Type': 'application/json',
};

http.defaults.transformRequest = [
  (p, headers) => {
    const param = {
      ...p,
    };
    switch (headers['Content-Type']) {
      case 'application/x-www-form-urlencoded':
        return qs.stringify(param);
      case 'application/json':
        return JSON.stringify(param);
      default:
        return param;
    }
  },
];

http.interceptors.response.use(
  (res) => {
    const rs = res.data;
    const rsType = ['code', 'status'];
    let isReturn = false;
    rsType.forEach((v) => {
      if (v in rs && rs[v] !== 0) {
        if (rs[v] === -9999) {
          // 如果请求接口  根据后台返回的状态进行统一处理
          Cookie.deleteCookie('sessionCode');
          sessionStorage.removeItem('UserInfo');
          localStorage.removeItem('UserInfo');
          sessionStorage.removeItem('sessionCode');
          localStorage.removeItem('sessionCode');
          const { origin, pathname } = window.location;
          window.location.href = `${origin}${pathname}#${Routers.Login}`;
        } else {
          throw rs;
        }
      } else {
        isReturn = true;
      }
    });
    if (isReturn) return rs.result || rs.data || null;
    return {};
  },
  (err) => {
    console.log(err);
    const success = false;
    return {
      success,
      err: `未知错误${err}`,
    };
  },
);

http.postForm = (
  url,
  data,
  config = {
    headers: {},
  },
) =>
  http.post(url, data, {
    ...config,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      ...config.headers,
    },
  });

export default http;

请求格式封装完后，中间有一层来调用统一的格式

--------------------------------------我就是史上最帅分割线，不接受反驳--------------------------


//这里贴出AppConfig 里的方法
//设置请求参数，此处的方法是获取本地sessionCode，登录时会往本地sessionStrange 存储后台返回的Token
class AppConfig {
    static isLogin = (loginParamField) => {
      if (loginParamField) {
        return loginParamField !== '0';
      }
      return false;
    }

    // static sessionCode = () => Cookie.getCookie('sessionCode');
    static sessionCode = () => localStorage.getItem('sessionCode');

    static accountId = () => {
      if (window.localStorage.getItem('cache_UserInfo')) {
        return JSON.parse(window.localStorage.getItem('cache_UserInfo')).accountId;
      }
      return '';
    }
}

export default AppConfig;

--------------------------------------我就是史上最帅分割线，不接受反驳-----------------------------------------
import HTTP from '../http'; //引入上文的 http.js 文件
import AppConfig from '../../commons/app_config';//引入app_config.js 文件

// 定义统一的接口路径
const getUserAddress = url => `${APP_CONFIG.URL}customer/${url}`;

// 用户相关接口
export default class UserApi {
  static queryBrokerageList(p) {
    return HTTP.post('此处应该是你的请求接口路径', { sessionCode: AppConfig.sessionCode(), ...p });
  }
}

总结：封装的方法返回数据的统一处理，请求路径的统一维护，减少代码的冗余，方便复用，
更方便前后端数据的交互。
始终遵循一个原则：一个方法，我们只做一件事，结构清晰透彻。
本案例可以直接使用，实践才是检验真理的唯一标准，如有不合理之处，请各位大佬
多多指教。