服务封装和设计

为什么要封装服务

1. 统一处理请求拦截和请求加载
2. 简化页面中的api请求写法
3. 文件模块化管理，代码层次清晰易懂
4. 不同host配置，更加方便调用

设计和思路

1. 对axios方法体二次封装
2. 错误拦截，请求加载，错误码处理，数据格式处理
3. 暴露配置文件方便host和错误码等配置
4. 重写请求方式

项目架构

.
├── build                           # webpack打包脚本
│   ├── webpack.base.conf.js          # 打包规则配置
│   ├── webpack.build.conf.js         # axios分装打包umd
│   ├── webpack.prod.conf.js          # demo打包配置
│   └── webpack.dev.conf.js           # demo运行环境配置
├── demo                           # 开发demo演示
│   ├── config                        # 配置文件
│   │   ├── errorCodes.ts             # 错误码配置
│   │   ├── statusCodes.ts            # 状态码配置
│   │   └── request.ts                # 请求实例初始化
│   ├── index.ts                   # request使用
│   └── index.html
├── src                         # 请求封装
│   ├── Axios.ts                  # axios二次封装【单例】
│   ├── axios.config.ts           # 服务配置
│   ├── axios.interface.ts        # 服务接口配置[数据结构]
│   ├── utils.ts                  # 服务工具库
│   └── index.ts                  # 服务聚合
├── doc                   # 技术文档    
├── plan                  # 开发计划 
├── tests                 # 测试文件
└── README.md             # 说明文件

安装教程

git clone https://gitee.com/hjmeng/vue3-axios.git   # 克隆项目到本地
cd vue3-axios                                       # 进入项目根目录
npm i                                               # 安装包依赖

启动脚本

#------------- demo --------------#
npm run dev            # 启动开发环境

npm run build:demo     # 打包demo环境测试

#------------- build --------------#
npm run build          # 打包axios服务

#------------- lint --------------#
npm run lint         # 启动lint检测

npm run lint:fix     # 启动lint修复

发布包

#------------查看当前npm源的地址-------------#
npm config get registry
#------------登录npm(如果有则不用登陆)-------------#
npm set registry https://registry.npmjs.org

npm login

#------------发布包(注意package.json中的版本)-------------#
npm version patch # 更新package中的版本号 npm version 1.0.2
npm publish

用法

服务配置[初始化服务]

import Request from '../../src/index'

const errorCallback = (msg: string) => {
  console.log(msg);
};

const requestBeforeCallback = config => {
  console.log('-------接口请求开始--------')
  config.headers['Content-Type'] = `application/json`; // 请求头不能是中文
  config.headers.Authorization = `Bearer 111111`; // 请求头不能是中文
  return config;
};

const requestAfterCallback = res => {
  console.log('-------接口请求结束--------')
};

const errorCodes = {
  500: '服务器繁忙，请稍后再试',
  50008: '非法的token',
  50012: '其他客户端登录了',
  50014: 'Token 过期了',
}

const statusCodes = {
  403: '没有操作权限',
  404: '接口找不到',
  500: '服务端错误',
}

const requestConfig = [{
  name: 'http',                      // 请求别名[方便调用]
  host: '',                          // host地址
  timeout: 30000,                    // 请求超时
  successCodes: [0, 200, null],      // 成功码
  errorCodes,                        // 错误码      
  statusCodes,                       // 状态码
  requestBeforeCallback,             // 请求前回调函数 config
  requestAfterCallback,              // 请求结束后回调函数
  errorCallback,                     // 请求错误回调函数msg为错误信息
}]
// 抛出请求配置
// 也可以根据环境变量来初始化你的请求
export default Request(requestConfig);

服务使用

import request from './config/request';
const { http } = request;
http.get('/api/movie/hot').then(res => {
  console.log(res)
});

http.get('/api/movie/hot', {
  params: {
    name: 'hjm100'
  }
}).then(res => {
  console.log(res)
});

http.post('/api/movie/hot', {name: 'hjm100'}, {
  stringify: true         // 是否启用对象变字符串[从接口参数中设置]
}).then(res => {
  console.log(res)
}).catch(err => {
    console.log(err);
});

http.post('/api/movie/hot', {name: 'hjm100'}, {
  noErrCallback: true      // 不自动执行错误回调
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log('接口错误了');
});

http.post('/api/movie/hot', {name: 'hjm100'}, {
  stringify: true,         // 是否启用对象变字符串[从接口参数中设置]
  noErrCallback: true      // 不自动执行错误回调
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log('接口错误了');
});

分支说明

1. master 默认分支

2. develop 调试分支

参与贡献

1. Fork 本仓库

2. 新建 Feat_xxx 分支

3. 提交代码

4. 新建 Pull Request