一.創(chuàng)建vue3+ts項(xiàng)目
- 創(chuàng)建
npm create vite@latest
-
選擇vue框架
1688970221642.png -
選擇語言typescript
1688970221648.png
二.配置axios
- 安裝
npm install axios -s
- 創(chuàng)建request.ts
import axios from 'axios';
//1. 創(chuàng)建axios對象
const service = axios.create({
baseURL:'http://testapi.xuexiluxian.cn'
});
//2. 請求攔截器
service.interceptors.request.use(config => {
return config;
}, error => {
Promise.reject(error);
});
//3. 響應(yīng)攔截器
service.interceptors.response.use(response => {
//判斷code碼
return response.data;
},error => {
return Promise.reject(error);
});
export default service;
- 創(chuàng)建api.ts
- 使用typescript語法，進(jìn)行請求參數(shù)限制和響應(yīng)參數(shù)限制
- 避免使用和響應(yīng)的時候出現(xiàn)參數(shù)錯誤，限制類型
import require from './request'
// 請求參數(shù)限制
interface IBaiDu{
Url:string,
method:string,
params:{
pageNum:number,
pageSize:number
}
}
// 響應(yīng)參數(shù)限制
interface IList{
courseCover:string
}
// 響應(yīng)參數(shù)限制
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">發(fā)送請求</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>
四. 注意
在該項(xiàng)目中已經(jīng)添加了ts引用配置寄狼，所以在api中，interface可以單獨(dú)放到一個ts文件即可真仲，增加可讀性
下圖中，include包含 ts文件
-
ts配置是
1688971146321.png 全局文件命名規(guī)范 xxx.d.ts
