Http 网络请求

@emooa/http 是一个基于 Axios 二次封装的网络请求库，提供统一的错误弹窗处理，作用于浏览器中。它结合后端接口服务，针对返回体进行错误告警，支持自定义返回的状态码、国际化，以及提示内容等。

特性

• 基于 Axios 封装
• 从浏览器创建 XMLHttpRequests
• 支持 Promise API
• 支持拦截请求和响应
• 中英文语言
• 支持针对不同字段的返回结构体
• 支持自定义提示内容
• 支持针对不同状态码提示不同信息

Installation

npm install @emooa/http
// or
yarn add @emooa/http

Usage

简单例子:

// http.ts
import Http from '@emooa/http';

const axios = new Http();
const http = axios.create();

export default http;

// index.ts
import React from 'react';
import { Button, Space } from '@emooa/ui';
import http from './http';

const App: React.FC = () => {
  const fetchData = async () => {
    const data = await http.get('/api/ok');
    console.log(data);
  };
  const fetchData404 = async () => {
    const data = await http.get('/api/404');
    console.log(data);
  };

  return (
    <Space>
      <Button type="primary" onClick={fetchData} status="success">
        Load Success
      </Button>
      <Button type="primary" onClick={fetchData404} status="danger">
        Load 404
      </Button>
    </Space>
  );
};

export default App;

复杂的例子：

// http.ts
import { isEmpty } from 'lodash';
import Http from '@emooa/http';

const axios = new Http({
  mapping: {
    code: 'code',
    message: ['notice', 'message'],
    ok: 0,
  },
  modal: {
    style: { top: 140 },
    info: {
      401: {
        style: { top: 140 },
        content: (
          <div className="pb-10 pt-20">
            <span>
              您好，您当前帐户未登录，请点击下方 <span class="color-primary">重新登录</span> 按钮。
            </span>
          </div>
        ),
        onOk: () => {
          window.location.href = `/login`;
        },
        okText: '登录',
      },
    },
  },
});

const http = axios.create({
  baseURL: '/',
  headers: {
    'X-Client-Token': '******',
  },
});

http.interceptors.request.use(config => {
  config.headers!['TOKEN'] = '******';
  return config;
});

http.interceptors.response.use(response => {
  return response.data;
});

export default http;

更多例子见: Examples.

API

Options

| 参数 | 定义 | 类型 | 默认值 | | ------------ | -------------- | ------------------------ | ---------- | | locale | 国际化语言 | zhCN \| en | zhCN | | colorPrimary | 主题色 | CSSProperties['color'] | #1677ff | | mapping | 返回体映射关系 | Mapping | - | | modal | 返回体映射关系 | Modal | - |

Mapping

| 参数 | 定义 | 类型 | 默认值 | | -------- | ---------------------------------------------- | -------------------- | ---------- | | code | 指定某个字段来代表接口返回的状态 Key | string | code | | ok | 指定返回状态码 | string \| number | 0 | | message | 指定某个字段返回提示消息，一般用于接口错误提示 | string \| string[] | - |

Modal

继承 Emool UI ModalProps

type Modal = ModalProps & {
  /**
   * 自定义提示内容
   */
  content?: React.ReactNode;
  /**
   * 非错误弹窗，属于通知类的弹窗样式，401 可能需要单独提示
   */
  info?: {
    [key: number | string]: ModalProps & { content?: React.ReactNode };
  };
};

License

MIT Licensed
Copyright (c) 2023 Emooa