vue2.x项目中ts配置axios返回值类型推导_axios interceptors 改变返回值类型

安装axios

npm i axios
1

定义接口类

// request.ts
import axios, { AxiosInstance, AxiosResponse } from 'axios'

export interface IResponse<T> {
  code: number,
  result: T,
  message: string
}
interface IOpts {
  url: string,
  method: string,
  headers?: object,
  params?: object | string,
  data?: object | string
}

export class Request {
 
  private request<T>(opts: IOpts) {
    const instance: AxiosInstance = axios.create({
      baseURL: '',
      timeout: 6000
    })
    this.setInterceptors(instance)
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    return instance<any, IResponse<T>(opts)
  }
  
  private setInterceptors(ins: AxiosInstance) {
    ins.interceptors.request.use(config => {
      return config
    })
    
    ins.interceptors.response.use((res: AxiosResponse) => {
      if(res.status === 200) {
        return res.data
      } else {
        console.log('接口错误')
      }
    })
  }

  get<T>(url: string, options?: object | string) {
    return this.request<T>({
      url,
      method: 'get',
      params: options
    })
  }

  post<T>(url: string, options?: object | string) {
    return this.request<T>({
      url,
      method: 'post',
      // headers: {
      //   'Content-Type':'application/x-www-form-urlencoded'
      // },
      data: options
    })
  }
}

const request = new Request()

export default request
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

全局引用

// main.ts
import Vue from 'vue'
// ...
import api from './xxx/request'

Vue.prototype.$api = api

new Vue({
  // ...
})
1
2
3
4
5
6
7
8
9
10

类型声明

项目目录下创建一个声明文件，用来声明我们在 Vue.prototype 上定义的 $api

// project.d.ts
import { Request } from './xxx/request'

type IApi = Request

declare module 'vue/types/vue' {
  $api: IApi
}
1
2
3
4
5
6
7
8

项目中使用

// home.vue
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

interface ITableColumn {
  name: string,
  time: string
}

interface ITable {
  total: number,
  list: Array<ITableColumn>
}

@Component
export default class Home extends Vue {
 total = 0
 tableData: Array<ITableColumn> = []
 
 created() {
    this.getTableData()
 }

 async getTableData() {
   const { result } = await this.$api.get<ITable>('/table/list', {pageSize: 10, pageNo: 1})
   this.total = result.total
   this.tableData = result.list
 }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

类型推导提示：

备注

主要需要注意的是，在通过

this.$api.get<ITable>(xxx)
1

通过泛型的方式将数据的返回类型传到接口请求处去

// request.ts
private request<T>(opts: IOpts) {
  this.setInterceptors()
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  return this.instance<any, IResponse<T>(opts)
}
1
2
3
4
5
6

这里通过 IResponse 定义一个统一的接口返回形式

interface IResponse {
  code: number,
  result: T,
  message: string
}
1
2
3
4
5

返回的数据类型包含这三个字段，至于 result 这个值具体是什么类型，需要根据业务接口进行判断，比如表格的时候我们就需要表格定义的那种接口形式，也就是从IResponse<T> 中将结构传入。