Typescript (ts) + axios 结合使用示例

编写 request.ts

import type {AxiosError, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig} from 'axios'
import axios from 'axios'

// 创建axios实例
const request = axios.create({
    baseURL: 'http://{需要请求的服务器地址}',
    timeout: 60 * 1000,
    params: {}
});

request.interceptors.request.use(function (config:InternalAxiosRequestConfig) {
    // 在发送请求之前做些什么
    return config;
}, function (error: any) {
    // 对请求错误做些什么
    console.log(error)
    return Promise.reject(error);
});

// 添加响应拦截器
request.interceptors.response.use(function (response: AxiosResponse) {
    // 成功返回时处理数据
    return response;
}, function (error: AxiosError<{code: number, msg: string, time: number}>) {
    // 出错时调用
    return Promise.reject(error);
});


export interface Response<T = any> {
    code: number,
    data: T,
    msg: string,
    time: number
}

const req = async <T>(config: AxiosRequestConfig) => {
    const res = await request(config)
    return (res.data) as T
}
export default req

编写接口函数

示例 api/hello.ts

import type {Response} from "@/lib/request";
import req from "@/lib/request";

export type HelloApiResp = {
	msg: string	
}

export const sayHello = (
    params: {name: string} = {name: "world"}
) => {
    return req<Response<HelloApiResp>>({
        url: '/api/hello',
        method: 'GET',
        params
    })
}

使用示例

import {sayHello} from "@/api/demo"

sayHello({name: "x"}).then(res => {
  console.log(res.msg)
})