@fuxiang1234/requests

前端基础请求库, 基于 axios 封装。

安装

# npm
npm install @fuxiang1234/requests
# yarn
yarn add @fuxiang1234/requests
# pnpm
pnpm install @fuxiang1234/requests

初始化配置

在项目入口处（如 main.js）调用 setRequestConfig， 进行全局基础配置

import { setRequestConfig } from '@fuxiang1234/requests';
setRequestConfig({
  baseURL: 'xxx', // 配置基础请求url前缀
  handleToken: () => 'token', // 获取token的回调函数，需要一个返回字符串的函数
  successAuthCode: ['00000'], // 接口权限码。如果接口不包含该权限码会抛出错误
});

完整配置项

export interface RequestsConfig {
  /** 基础url前缀 */
  baseURL?: string;
  /** 后端接口表示请求成功时候的权限码 */
  successAuthCode?: string[];
  /** 传递一个获取token的函数 */
  handleToken?: () => string;
  /** http状态码非200情况处理 */
  handleNetworkError?: (error: AxiosError) => void;
  /** 后端接口状态码（response.code）与successAuthCode不同时候的情况处理 */
  handleAuthError?: (response: AxiosResponse) => void;
  // 通用request处理
  handleRequest?: (config: AxiosRequestConfig) => AxiosRequestConfig;
  // 通用response处理
  handleResponse?: (response: AxiosResponse) => AxiosResponse;
}

使用方式

绝大多数情况下，直接引入接口对应的 http 函数即可。

import { get, post, put, del } from '@fuxiang1234/requests';

const getApi = params => get('接口路径', params);
const postApi = params => post('接口路径', params);

推荐搭配 vue-hooks-plus 中的 useRequest 使用，简化相关代码。

import { useRequest } from 'vue-hooks-plus';
const getUsername = params => get('/接口路径', params);

const { data, error, loading } = useRequest(() => getUsername({ desc: 'good' }));

为了使用方便和标准化，直接提供的 get/post 等函数都只能处理标准化接口（即接口符合 restful 规范，并且返回的数据中，根路径包含 code、data 和 msg 字段），且会直接返回 data 字段中的数据。

如果遇到非标准化的接口(如接口返回的根路径中不包含 data 字段)，可以使用 returnReponse 参数，加了该参数后会返回完整的 response。

import { get, post, put, del } from '@fuxiang1234/requests';

const getApi = params => get('接口路径', params, { returnResponse: true });

也可以使用 request 函数进行处理。

import { request } from '@fuxiang1234/requests';

const getApi = params =>
  request({
    url: 'https://www.baidu.com',
    method: 'get',
    headers: {
      ...
    }
  })

多业务场景处理

某些项目可能有多个业务场景，后端也提供了多套不同的 api，这时候可以使用 create 函数创建一个新的 requests 实例。

不同 requests 实例的配置彼此独立，不会共享。

import { create } from '@fuxiang1234/requests';

const { request, get, post, put, del } = create({
  // 传入配置
  baseURL: 'xxx',
});

获取 axios 实例

在某些复杂场景，如果@fuxiang1234/request 的默认配置不能满足您的要求，您可以通过requests.instance获取 axios 示例，来自定义如拦截器等功能。

import { requests } from '@fuxiang1234/requests';

requests.instance.interceptors.request.use(config => {
  console.log('config', config);
  return config;
});

获取原本的 axios（不推荐）

如果确实存在本工具库无法覆盖的场景（如获取 CancelToken 等），你也可以通过以下方式获取原本的 axios。

import { axios } from '@fuxiang1234/requests';