ai-clone/frontend-ai/config/api-usage-example.js

/**
 * API 使用示例
 * 展示如何在页面中使用统一的API配置
 */

import { API_BASE, API_ENDPOINTS, buildURL, request, uploadFile, downloadFile } from '@/config/api.js';

export default {
	data() {
		return {
			API_BASE,  // 导入API基础地址
			videos: [],
			loading: false
		}
	},

	methods: {
		/**
		 * 示例1: 获取视频列表（GET请求）
		 */
		async loadVideos() {
			this.loading = true;
			try {
				// 方式1: 使用request方法
				const result = await request({
					url: API_ENDPOINTS.revival.getList,
					method: 'GET'
				});
				
				if (result.success) {
					this.videos = result.data;
				}
				
				// 方式2: 使用uni.request（传统方式）
				uni.request({
					url: buildURL(API_ENDPOINTS.revival.getList),
					method: 'GET',
					success: (res) => {
						if (res.data.success) {
							this.videos = res.data.data;
						}
					}
				});
			} catch (error) {
				console.error('加载失败:', error);
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},

		/**
		 * 示例2: 发送对话（POST请求）
		 */
		async sendMessage(message) {
			try {
				const result = await request({
					url: API_ENDPOINTS.conversation.send,
					method: 'POST',
					data: {
						message: message,
						voiceId: this.selectedVoiceId,
						conversationId: this.conversationId
					}
				});
				
				if (result.success) {
					// 播放AI回复音频
					const audioUrl = buildURL(API_ENDPOINTS.conversation.getAudio(result.audioFile));
					this.playAudio(audioUrl);
				}
			} catch (error) {
				console.error('发送失败:', error);
			}
		},

		/**
		 * 示例3: 上传文件（创建视频）
		 */
		async uploadPhoto() {
			try {
				// 选择照片
				const [err, res] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});
				
				if (err) return;
				
				const tempFilePath = res.tempFilePaths[0];
				
				// 上传照片并生成视频
				const result = await uploadFile({
					url: API_ENDPOINTS.revival.createVideo,
					filePath: tempFilePath,
					name: 'photo',
					formData: {
						voiceId: this.selectedVoiceId,
						text: this.inputText,
						name: this.videoName
					}
				});
				
				if (result.success) {
					uni.showToast({
						title: '生成成功',
						icon: 'success'
					});
					// 刷新列表
					this.loadVideos();
				}
			} catch (error) {
				console.error('上传失败:', error);
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				});
			}
		},

		/**
		 * 示例4: 下载视频
		 */
		async downloadVideo(videoUrl) {
			try {
				uni.showLoading({
					title: '下载中...'
				});
				
				const tempFilePath = await downloadFile({
					url: videoUrl
				});
				
				uni.hideLoading();
				
				// 保存到相册
				uni.saveVideoToPhotosAlbum({
					filePath: tempFilePath,
					success: () => {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
					}
				});
			} catch (error) {
				uni.hideLoading();
				console.error('下载失败:', error);
				uni.showToast({
					title: '下载失败',
					icon: 'none'
				});
			}
		},

		/**
		 * 示例5: 删除视频
		 */
		async deleteVideo(videoId) {
			try {
				const result = await request({
					url: API_ENDPOINTS.revival.deleteVideo(videoId),
					method: 'DELETE'
				});
				
				if (result.success) {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					// 刷新列表
					this.loadVideos();
				}
			} catch (error) {
				console.error('删除失败:', error);
				uni.showToast({
					title: '删除失败',
					icon: 'none'
				});
			}
		},

		/**
		 * 示例6: 构建静态资源URL
		 */
		getResourceUrls() {
			// 视频URL
			const videoUrl = buildURL(API_ENDPOINTS.static.video('revival_test_123.mp4'));
			// 结果: http://115.190.167.176:20002/static/videos/revival_test_123.mp4
			
			// 图片URL
			const imageUrl = buildURL(API_ENDPOINTS.static.image('avatar.jpg'));
			// 结果: http://115.190.167.176:20002/static/images/avatar.jpg
			
			// 音频URL
			const audioUrl = buildURL(API_ENDPOINTS.conversation.getAudio('tts_123.mp3'));
			// 结果: http://115.190.167.176:20002/api/conversation/audio/tts_123.mp3
			
			return {
				videoUrl,
				imageUrl,
				audioUrl
			};
		},

		/**
		 * 示例7: 错误处理
		 */
		async loadDataWithErrorHandling() {
			try {
				const result = await request({
					url: API_ENDPOINTS.revival.getList,
					method: 'GET',
					timeout: 10000  // 10秒超时
				});
				
				if (result.success) {
					this.videos = result.data;
				} else {
					throw new Error(result.message || '请求失败');
				}
			} catch (error) {
				console.error('加载失败:', error);
				
				// 根据错误类型显示不同提示
				if (error.errMsg && error.errMsg.includes('timeout')) {
					uni.showToast({
						title: '请求超时，请检查网络',
						icon: 'none'
					});
				} else if (error.errMsg && error.errMsg.includes('fail')) {
					uni.showToast({
						title: '网络连接失败',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: error.message || '加载失败',
						icon: 'none'
					});
				}
			}
		},

		/**
		 * 示例8: 并发请求
		 */
		async loadMultipleData() {
			try {
				uni.showLoading({
					title: '加载中...'
				});
				
				// 同时请求多个接口
				const [videosResult, voicesResult] = await Promise.all([
					request({
						url: API_ENDPOINTS.revival.getList,
						method: 'GET'
					}),
					request({
						url: API_ENDPOINTS.voice.getList,
						method: 'GET'
					})
				]);
				
				if (videosResult.success) {
					this.videos = videosResult.data;
				}
				
				if (voicesResult.success) {
					this.voices = voicesResult.data;
				}
				
				uni.hideLoading();
			} catch (error) {
				uni.hideLoading();
				console.error('加载失败:', error);
			}
		}
	}
};