使用TypeScript封装axios方法：自定义响应数据格式

Step 1: 定义axios方法的响应格式

新建一个文件，如：shims-custom.d.ts，任意的*.d.ts都可以。重新声明axios模块：

import * as axios from 'axios';

declare module 'axios' {
    // 定制业务相关的网络请求响应格式， T 是具体的接口返回类型数据
    export interface CustomSuccessData<T> {
        code: number;
        msg?: string;
        message?: string;
        data?: T;
        [keys: string]: any;
    }
}

Step 2: 定义axios的请求方法类型

新建一个type.ts，以get的方法为例，定义一个方法的接口泛型：
–关于泛型接口，链接: 泛型接口；

import {AxiosResponse, AxiosRequestConfig, CustomSuccessData} from 'axios';

// 泛型接口 
export interface Get {
    <T>(url: string, params?: object, config?: AxiosRequestConfig): Promise<CustomSuccessData<T>>;
}

–引入的CustomSuccessData为上文Step 1中的重新声明axios时定制的接口。

Step 3: 创建axios实例

这部分直接写下 局部的get方法，其他同理：

import axios, {AxiosResponse, AxiosRequestConfig} from 'axios';
// Step 2 中的接口泛型
import {Get} from './types';

// 创建axios的实例
const service = axios.create({
    timeout: 10000 // 超时时间
});
// 封装 get 方法，类型为Get
const get: Get = async (url, params, config) => {
    const response = await service.get(url, {params, ...config});
    return response.data;
};

// 使用 request 统一调用，包括封装的get、post、put、delete等方法
const request = {get};

// 导出至外层utils文件夹的index.ts，方便统一使用utils
export {request};

Step 4: 使用方式：强类型限制data返回值类型

eg: 使用get方法请求数据，限制返回的data的类型为string:

// 引入utils
import {request} from '@/utils';

async handelFecthData() {
	const {data, code} = await request.get<string>('/mock/test.json');
    // console.log(data);  // => test，我是字符串格式的。
    // console.log(code);  // => 0
}

模拟一组get请求的test.json数据：

{
    "code": 0,
    "message": "success",
    "data": "test，我是字符串格式的。"
}

Note That:
本文在step 4中使用的 async & await。当然也可以使用axios中回调Promise的.then().then()…的语法。
推荐使用 async & await，至于和promise的区别，请参考这篇文章：
promise与async和await的区别