安装axios
npm i axios
定义接口类
// 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
全局引用
// main.ts
import Vue from 'vue'
// ...
import api from './xxx/request'
Vue.prototype.$api = api
new Vue({
// ...
})
类型声明
项目目录下创建一个声明文件,用来声明我们在 Vue.prototype
上定义的 $api
// project.d.ts
import { Request } from './xxx/request'
type IApi = Request
declare module 'vue/types/vue' {
$api: IApi
}
项目中使用
// 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>
类型推导提示:
备注
主要需要注意的是,在通过
this.$api.get<ITable>(xxx)
通过泛型的方式将数据的返回类型传到接口请求处去
// 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)
}
这里通过 IResponse
定义一个统一的接口返回形式
interface IResponse {
code: number,
result: T,
message: string
}
返回的数据类型包含这三个字段,至于 result
这个值具体是什么类型,需要根据业务接口进行判断,比如表格的时候我们就需要表格定义的那种接口形式,也就是从IResponse<T>
中将结构传入。