vue3+ts,想在axios中对请求和响应的数据做interface或者type验证,如下图和代码,请问要怎么修改

payload

image.png

res 响应

image.png

interface

//请求
export interface TopicsPayloadProps {
  page: number
  tab?: string
  limit?: number
  mdrender?: string
}

//响应
export interface TopicsProps {
  author_id: string
  content: string
  author: AuthorProps
}

export interface AuthorProps {
  avatar_url: string
  loginname: string
}

代码

import { TopicsPayloadProps, TopicsProps } from '../interface/index'

    const state = reactive({
      topics: [] as TopicsProps[]
    })
    const getData = () => {
      const payload: TopicsPayloadProps = {
        page: 1
      }
      axios
        .get('/topics', {
          params: payload
        })
        .then(res => {
          state.topics = res.data.data
        })
        .catch(err => {
          console.log('err', err)
        })
    }
阅读 3.6k
1 个回答

好像你的接口还有一层,可以单独定义,或者直接在get上标注返回值类型就行了,如下

直接声明在get上

axios.get<{data: TopicsProps[], success: boolean}>('/topics', {
  params: payload
})

单独定义

// interface
interface BaseResp<T>{
  success: boolean;
  data: T
}

// request

axios.get<BaseResp<TopicsProps[]>>('/topics', {
  params: payload
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题