vue+ts定义axios数据类型报错解决

在src目录下创建一个名字为axios.d.ts的文件,里面写

import * as axios from 'axios'
// interface Item {
//     ID: number
//     activity: string
//     after_sale: string
//     authen: string
//     bright_point: string
//     buy_time: string
//     car_price: string
//     card_time: string
//     color: string
//     decimal: string
//     detail_par: string
//     dif_cards: string
//     diff_coun: string
//     discharge: string
//     displacement: string
//     down_payments: string
//     drive: string
//     emission_standard: string
//     excellent_service: string
//     fil_engine: string
//     fil_gearbox: string
//     fil_structor: string
//     fueltype: string
//     img_src: string
//     insurance: string
//     integer: string
//     kilometre: string
//     logistics: string
//     manu_type: string
//     mileage: string
//     mon_price: string
//     nal_price: string
//     number: string
//     output_volume: string
//     qanda: string
//     seatnumber: string
//     service_shop: string
//     shopcar: string
//     state: boolean
//     tit_con: string
//     top: number
//     trait: string
//     transaction: string
//     veh_age: string
//     vehicle_system: string
//     year_mspect: string
//     status: number
// }
declare module 'axios' {
    interface AxiosInstance {
        (config: AxiosRequestConfig): any
    }
}

这个里面可以定义类型,把any换成你定义的类型就行,我注释掉的那个地方就是自己之前定义的类型

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 + TypeScript 使用 Axios 进行网络请求的步骤如下: 1. 安装 Axios 库:在项目中安装 Axios 库,可以使用命令 `npm install axios --save` 或者 `yarn add axios`。 2. 创建 TypeScript 类型定义 Axios 返回数据的类型,例如: ```typescript interface ResponseData { code: number; message: string; data: any; } ``` 3. 创建 Axios 实例:在 Vue 组件中创建 Axios 实例,例如: ```typescript import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; import { ResponseData } from './types'; class ApiService { private readonly axiosInstance: AxiosInstance; constructor() { this.axiosInstance = axios.create({ baseURL: 'https://example.com/api', }); } async get<T>(url: string, config?: AxiosRequestConfig): Promise<T> { const response: AxiosResponse<ResponseData<T>> = await this.axiosInstance.get<ResponseData<T>>(url, config); return response.data.data; } async post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> { const response: AxiosResponse<ResponseData<T>> = await this.axiosInstance.post<ResponseData<T>>(url, data, config); return response.data.data; } } export default new ApiService(); ``` 4. 使用 Axios 实例:在 Vue 组件中使用 Axios 实例进行网络请求,例如: ```typescript import { defineComponent, ref } from 'vue'; import ApiService from './apiService'; import { User } from './types'; export default defineComponent({ setup() { const users = ref<User[]>([]); const fetchUsers = async () => { users.value = await ApiService.get<User[]>('/users'); }; return { users, fetchUsers, }; }, }); ``` 相关问题: 1. 什么是 TypeScript? 2. 什么是 Axios? 3. 如何在 Vue 中使用 Axios 发送网络请求? 4. 如何处理 Axios 返回的数据?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值