看起来普通的代码,使用起来也相当普通
目录
一、axios请求响应拦截
http文件夹下 index.ts
import axios from "axios";
import path from './path' // 请求基准路径
import { toLogin } from './event' // 处理事件
const $http = axios.create({
baseURL: path.httpbaseUrl,
timeout: 8000,
withCredentials: true,
});
$http.interceptors.request.use((res: any) => {
return res;
}, error => {
return Promise.reject(new Error(error));
});
$http.interceptors.response.use((res: any) => {
if (res.data.code == 401) {
return toLogin(res.data)
}
return res
}, error => {
return Promise.reject(new Error(error));
})
export default $http;
二、请求方法处理
http文件夹下 request.ts
import $http from './index'
/** http请求类 */
class Http {
/** axios实例 */
http: any = $http
/** json格式 */
post: Function = $http.post
/** 路由后以'?'拼接参数 */
get1: Function = $http.get
/** 路由后面直接用'/'拼接参数 */
get2: Function = $http.get
constructor() {
// 封装请求方式
this.get1 = function (url: string, data?: any) {
return $http.get(url, {
params: data
})
}
this.get2 = function (url: string, data?: any) {
return $http.get(url + '/' + data)
}
}
}
export {
Http
}
三、API管理
http文件夹下新建api 文件夹,api文件夹下划分不同模块的接口请求
举例在api文件夹下建立一个 flow.ts 文件
import { Http } from "../request"
import { ErrorDecorator } from '../decorators'
class Flow extends Http {
constructor() {
super()
}
@ErrorDecorator
/** 获取画布信息 */
async queryDraw(id: number) {
const res = await this.get2('/flow/queryDraw', id)
return res
}
}
export default Flow
此处继承 Http 请求类,就可以使用封装好的请求方法了
api 做统一抛出,在 api文件夹下新建 index.ts 文件
import Space from './space'
import Flow from './flow'
export const $api = {
space: new Space(),
flow: new Flow(),
}
四、ts装饰器
上面接口请求我使用了ts的装饰器, 使用方法就是放到使用方法上😀
import { ErrorDecorator } from '../decorators'
@ErrorDecorator
/** 获取画布信息 */
http文件夹下新建 decorators 文件夹
decorators 文件夹下新建 index.ts
/** 错误捕获 装饰器*/
export function ErrorDecorator(prototype: any, functionName: string, descriptor: any) {
// 原函数
const fn = descriptor.value
descriptor.value = async function () {
try {
const res = await fn.apply(this, arguments)
console.group(`${functionName}方法`)
console.log('%c 请求成功! ', 'color: green');
console.log(`%c 响应信息:${res.data.errorMsg} `, 'color: green');
console.groupEnd();
return res
} catch (e) {
console.group(`${functionName}方法`)
console.log('%c 请求失败! ', 'color: red');
console.log(`%c 错误信息:${e} `, 'color: red');
console.groupEnd();
}
}
return descriptor
}
就是把原来的方法又拿过来加了点东西,就叫装饰器。装饰器的使用,可以做更多的事情。 我这里只是做了网络层次的错误处理。以及控制台分析接口顺序和接口错误原因。
装饰器使用可能会存在警告,告诉你一大堆巴拉巴拉的。
在 tsconfig.json 文件 compilerOptions 下加一下 "experimentalDecorators": true,
不加也能正常用,就是看着警告有点烦
五、开始使用
网络层次的错误通过装饰器捕获了,我个人觉得调用接口逻辑无需再try catch。因为因为网络请求的错误被捕获了,能返回结果的网络没问题。内容可能有问题,我再判断后端给的标识 success。能通过这两个判断的,基本不会有问题。当然这只是个人看法。
import { $api } from '@/http/api'
async function queryDraw() {
const res = await $api.flow.queryDraw(xxx)
if (res && res.data.success) {
xxxx....
}
}
总结
使用起来很普通的代码,看起来也相当普通