一.创建vue3+ts项目
- 创建
npm create vite@latest
-
选择vue框架
1688970221642.png -
选择语言typescript
1688970221648.png
二.配置axios
- 安装
npm install axios -s
- 创建request.ts
import axios from 'axios';
//1. 创建axios对象
const service = axios.create({
baseURL:'http://testapi.xuexiluxian.cn'
});
//2. 请求拦截器
service.interceptors.request.use(config => {
return config;
}, error => {
Promise.reject(error);
});
//3. 响应拦截器
service.interceptors.response.use(response => {
//判断code码
return response.data;
},error => {
return Promise.reject(error);
});
export default service;
- 创建api.ts
- 使用typescript语法，进行请求参数限制和响应参数限制
- 避免使用和响应的时候出现参数错误，限制类型
import require from './request'
// 请求参数限制
interface IBaiDu{
Url:string,
method:string,
params:{
pageNum:number,
pageSize:number
}
}
// 响应参数限制
interface IList{
courseCover:string
}
// 响应参数限制
interface IResposeBaiDu{
data:{
pageInfo:{
endRow:number,
list:IList[]
}
},
meta:object
}
export function getBaiduData(config:IBaiDu):Promise<IResposeBaiDu>{
return require(
{
url:config.Url,
method:config.method,
data:config.params
}
)
}
三. vue3中使用
<template>
<div class="card">
<button type="button" @click="getHttpBaidu">发送请求</button>
</div>
</template>
<script setup lang="ts">
import {getBaiduData} from '../types/axios/api'
import { ref } from 'vue'
defineProps<{ msg: string }>()
const getHttpBaidu =()=>{
getBaiduData({
Url:'/api/course/mostNew',
method:'post',
params:{
pageNum:1,
pageSize:8
}
}).then(res=>{
console.log('res-------------',res.data.pageInfo.list[0].courseCover);
}).catch(err=>{
console.log('err------------',err);
})
}
</script>
四. 注意
在该项目中已经添加了ts引用配置，所以在api中，interface可以单独放到一个ts文件即可，增加可读性
下图中，include包含 ts文件
-
ts配置是
1688971146321.png 全局文件命名规范 xxx.d.ts
