ts + axios封装

最新推荐文章于 2025-03-07 16:54:14 发布

原创

最新推荐文章于 2025-03-07 16:54:14 发布 · 3.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ts #vue

本文介绍了如何使用TypeScript封装axios请求，包括get和post方法，以及响应结果的处理，重点讲述了错误处理策略和约定的接口返回格式。

https.ts文件

/**
 * @author  作者
 * @time    2020-9-27 8:47
 * @title   http请求封装
 * desc 前后端约定接口返回解构规范
 * {
 *    code: '1',
 *    data:" 请求成功",
 *    message: ""
 * }
 */
import { Interceptor } from './interceptor';
import { message, Modal } from 'ant-design-vue';
import qs from 'qs';

export class Http {
    public axios: any;


    constructor() {
        // 获取axios实例
        this.axios = new Interceptor().getInterceptors();
    }

    /**
     * get请求
     * @param {String} url [请求的url地址]
     * @param {object} params [请求时携带的参数, 默认为空]
     * @param {boolean} download [判断是否是下载请求， 默认为否]
     * @param {boolean} loading [判断是否是需要loading， 默认为否]
     * @desc 由于loading不能一成不变全屏加载，很多种情况都是局部loading，所以当loading为true时，会返回整个response，以便自行处理loading。
     */
    public getData(url: string, params: object = {}, download: boolean = false, loading: boolean = false) {

        return new Promise((resolve, reject) => {
            const config: any = { params };

            if (download) {
                config.responseType = 'blob';
            }

            this.axios.get(url, {
                ...config,
            }).then((res: any) => {
                this.resultHandle(res, resolve, loading);
            }).catch((err: { message: any; }) => {
                reject(err.message);
            });
        });

    }


    /**
     * post请求
     * get请求
     * @par