4 Star 2 Fork 1

鸿基梦 / vue3-axios

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

服务封装和设计

为什么要封装服务

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

设计和思路

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

项目架构

.
├── config               # 配置文件
│   ├── errorCodes.ts     # 错误码配置
│   ├── statusCodes.ts    # 状态码配置
│   └── request.ts        # 请求配置
├── request              # 请求封装
│   ├── Axios.ts          # axios二次封装【单例】
│   ├── service.config.ts # 服务配置
│   ├── utils.ts          # 服务工具库
│   └── index.ts          # 服务聚合
├── index.ts             # 实例服务
└── README.md            # 说明文件

用法

服务配置

// 默认配置
export const requestConfig = {
  name: 'http',               // 请求别名[方便调用]
  host: '',                   // host地址
  timeout: 30000,             // 请求超时
  successCodes: [0, 200],     // 成功码
  errorCodes: {},             // 错误码
  statusCodes: {},            // 状态码
  errorCallback: (msg: string) => { alert(msg); }, // 请求错误回调函数msg为错误信息
  requestBeforeCallback: undefined,  // 请求前回调函数 config
  requestAfterCallback: undefined,   // 请求结束后回调函数
};
// 回调函数写法
const errorCallback = (msg: string) => {
  // 可以显示错误信息等操作
  console.log('接口错误后统一做些操作吧');
};
const requestBeforeCallback = (config) => {
  // 可以设置axios的config配置
  config.headers.Authorization = `Bearer 111111`; // 请求头不能是中文
  return config;
};
const requestAfterCallback = (res) => {
  // res为返回信息
  Toast.clear();
};
/************************用法*********************/
// 实例化请求
import requestConfig from './config/request';
import Request from './request';
export default new Request(requestConfig);
/**
 * Request 参数
 *无参数: 使用默认参数实例化axios
 *RequestConfigInterface[]: 循环遍历实例化axios
 *RequestConfigInterface: 实例化axios
 */
// 使用[所有的axios实例都挂载在requestConfig.name上]
import Request from '../service/index';
const { http } = Request as any;
export function getIndex() {
  return http.get('/api/movie/hot');
}

/*****************特殊方式使用*********************/
// 请求地址, 请求参数, 配置文件
http.get('/api/movie/hot', {}, {
  stringify: true, // 是否启用对象变字符串[从接口参数中设置]
  noErrAlert: true // 不弹出弹框
});

Comments ( 0 )

Sign in for post a comment

About

1. 宗旨: 更方便的请求方式,更简洁的写法, 更易懂的代码 1. 代码层面详解请移步源码,注释均采用中文方便你的阅读 1. 虽然是vue3axios封装,但是我想要做一个通用的服务不仅仅只实用于vue3 spread retract
JavaScript and 2 more languages
Cancel

Releases

No release

Contributors

All

Activities

load more
can not load any more
JavaScript
1
https://gitee.com/hjmeng/vue3-axios.git
git@gitee.com:hjmeng/vue3-axios.git
hjmeng
vue3-axios
vue3-axios
master

Search