ts+axios 能定义接口返回值的类型吗

Question

    loadData: (Code?: string): Promise<any> => {
        return service({
            url: '/a/1',
            params: { code: 1 }
        })
    },

我尝试去定义 Promise<any>里的any的类型，希望与数据接口返回的类型一致。目的是希望类型定义好之后可以不用去看文档也能知道这个接口返回的是哪些数据，但是axios 返回的是 AxiosPromise<any>，不匹配。我应该怎么做？

Answer 1

any 处，换成你定义的格式就好了

Answer 2

interface MyData {
  abc: number;
}

async function loadData(): Promise<AxiosResponse<MyData>> {
  return await axios.get('http://api.xxx.com/load-data')
}

Answer 3

写一个更通用一点的解决方案

// 1. 创建 axios 实例
const axiosInstance = axios.create({参数自己配置});

// 2. 配置拦截器

function setupInterceptors(axiosInstance: AxiosInstance) {
  axiosInstance.interceptors.request.use(
    // 此处可根据需要做一些拦截比如 token 检测
    config => return config,
    error => return Promise.reject(error),
  )

  axiosInstance.interceptors.response.use(
    response => {
      // 此处根据业务做一些拦截处理
      if (response.data?.code === 0) {
        return response
      } else {
        return Promise.reject(response)
      }
    },
    error => {
      const status = error.status || error.response?.status || 0
      if (status === 401 || status === 403) {
        ElMessage.error('Please login')
          removeToken()
          window.location.replace('/login')
        return
      }
      let errData = error.response?.data || {
        message: error.message,
        errors: {},
      }
      errData = { ...errData, status }
      return Promise.reject(errData)
    },
  )
}

// 3. 将拦截器应用在实例上
setupInterceptors(axiosInstance)

// 4. 返回统一的请求函数
// 先定义类型
export interface IResponseData<T> {
  code: number
  msg: string
  data: T
}
export default async function request<T = any>(config: AxiosRequestConfig) {
  return axiosInstance.request<IResponseData<T>>(config).then(res => res.data)
}

使用方式

// 登录API
export function loginApi(data: { username: string; password: string }) {
  return request({
    url: '/api/user/login',
    method: 'post',
    data: data,
  })
}

代码提示