axios 与 TypeScript新闻案例
1 axios 与 TypeScript{#axios-and-ts}2 axios封装优化3 频道渲染{#case-channel}4 导航切换{#case-nav-toogel}5 列表更新{#case-list}
准备项目的基础结构
1 axios 与 TypeScript{#axios-and-ts}
掌握：掌握axios配合泛型设置响应数据类型
小结：
使用axios的时候怎么给返回数据提供类型？
axios.request<数据类型>() 其他请求方法类似 提供的类型要注意啥？
类型需要根据接口返回的数据类声明，或者根据接口文档
2 axios封装优化
优化axios数据获取和类型定义
封装axios import axios from 'axios'
const request = axios.create({
baseURL: 'http://geek.itheima.net/v1_0'
})
request.interceptors.request.use((config) => {
return config
})
request.interceptors.response.use((res) => {
return res.data?.data
})
export default request
使用
3 频道渲染{#case-channel}
完成：axios获取数据后频道列表渲染
步骤：
提取类型到 types 目录在组件初始化通过 axios.get 获取数据进行渲染
types/data.d.ts
// 频道对象
export type ChannelItem = {
id: number;
name: string;
};
// 频道接口响应数据
export type ChannelResData = {
channels: ChannelItem[];
}
ChannelNav.vue
class="item" href="javascript:;" v-for="(item, i) in channels" :key="item.id" > {{item.name}}
4 导航切换{#case-nav-toogel}
完成：频道导航切换效果
切换的频道ID将来需要给 ArticleList 组件使用，所以在 App 组件定义数据在 ChannelNav 改变频道的时候，通过自定义事件传递给 App 组件使用和修改
默认选中
App.vue
+
ChannelNav.vue
// 2.完成切换效果
+defineProps<{ channelId: number }>()
class="item" + :class="{active: channelId === item.id}" href="javascript:;" v-for="item in channels" 进行切换 ChannelNav.vue +const emit = defineEmits<{ + (e: 'changeChannel', id: number): void; +}>(); class="item" :class="{ active: channelId === item.id }" href="javascript:;" v-for="item in channels" :key="item.id" + @click="emit('changeChannel', item.id)" > {{ item.name }}
App.vue
5 列表更新{#case-list}
实现：频道切换后列表更新
步骤：
声明接口数据的类型监听频道ID变化，开启默认执行发起请求，获取数据完成渲染
代码：
类型 types/data.d.ts
// 文章对象
export type ArticleItem = {
art_id: string;
aut_id: string;
aut_name: string;
comm_count: number;
cover: {
cover: number;
images: string[];
};
is_top: number;
pubdate: string;
title: string;
};
// 文章接口响应数据
export type ArticleResData = {
pre_timestamp: string;
results: ArticleItem[];
}
监听频道ID变化，开启默认执行，获取数据
App.vue
ArticleList.vue
import request from '../utils/request';
import { ref, watch } from 'vue';
import { ArticleItem, ArticleResData } from '../types/data';
const props = defineProps<{ channelId: number }>();
const articles = ref
watch(
() => props.channelId,
async () => {
const res = await request.get
`/articles`,
{
params: {
channel_id: props.channelId,
timestamp: Date.now(),
},
},
);
articles.value = res.results;
},
{ immediate: true }
);
渲染
{{ item.title }}
v-for="(src, i) in item.cover.images" :key="i" class="img" :src="src" alt="" /> {{ item.aut_name }} {{ item.comm_count }}评论 {{ item.pubdate }}
推荐文章
本文由 用户 于 2024-04-05 发布在 夸智网，如有疑问，请联系我们。
本文链接：https://www.kuazhi.com/post/713683461.html
发表评论