axios + ts封装请求方法

看起来普通的代码，使用起来也相当普通

目录

一、axios请求响应拦截

二、请求方法处理

 三、API管理

 四、ts装饰器

 五、开始使用

总结

一、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....
    }
}

---

总结

使用起来很普通的代码，看起来也相当普通