meixirequestts
项目目录结构
|-- dist ---------------------打包后文件夹
| |-- index.d.ts
| |-- index.js
| |-- meixirequestts.cjs.development.js
| |-- meixirequestts.cjs.development.js.map
| |-- meixirequestts.cjs.production.min.js
| |-- meixirequestts.cjs.production.min.js.map
| |-- meixirequestts.esm.js
| |-- meixirequestts.esm.js.map
| |-- request.d.ts
| |-- requestConfig.d.ts
| |-- requestResponseError.d.ts
|-- src -----------------------项目目录
| |-- index.ts
| |-- request.ts -----------------------网络请求拦截器
| |-- requestConfig.ts -----------------网络请求配置
| |-- requestResponseError.ts-----------网络请求错误
| |-- type.d.ts
使用
// 项目中使用 引入
import { request, requestConfig, requestResponseError } from 'meixirequestts';
// 具体业务自行处理
import router from '@/router';
// 具体业务自行处理
import { Notification } from 'element-ui';
class UseRequest {
constructor() {
}
//初始化网络请求配置
init() {
requestConfig.initRequestConfig({
// 网络请求前缀
baseURL: process.env.VUE_APP_URL,
//超时时间
timeout: 10000 // 请求超时时间
});
// 注册网络请求错误处理
this.registerErrorList();
}
startRequest() {
return request;
}
registerErrorList() {
//注册处理网络异常回调函数
requestResponseError.registerErrorList([
{
//key 后端返回的错误信息
key: 'token expire',
cb: () => {
router.push('/login');
}
},
{
//当未匹配到错误类型，通用的错误类型回调
key: 'default',
cb: (error) => {
const { msg } = error;
Notification({
type: 'error',
title: `${msg ? '操作异常' : '网络异常'}`,
message: `${msg ? msg : '网络超时或连接超时，请稍后再试'}`
});
}
}
]);
}
}
const useRequest = new UseRequest();
export default useRequest;
//项目中实际使用
// 获取收款账户列表
// 第一个参数 method：'get'/'post'/'delete'/'put'
// 第二个参数 是否需要携带token Boolean
// 第三个参数 是否是formData 携带参数是否是formData类型
// 第四个参数
// 是否修改原有配置的接口请求不影响全局的网络请求配置 通常清空是后端可能有多个请求接口不一致，可能部分接口会用到该参数
// 参数类型为方法需要返回该类型对象{
// baseURL: 需要需改的网络请求
// timeout: 超时时间
// }
export const GetOrderAccount = () => {
return request({
method: 'get',
url: '/fund/account/selectOrderAccount'
},_auth,_isFormData);
};
