test/1114/app/components/weather/WeatherSearchForm.tsx

89 lines
2.6 KiB
TypeScript
Raw Normal View History

2025-11-14 19:14:38 +08:00
import axios, { type AxiosInstance, AxiosError } from 'axios';
import type { WeatherData } from "@/store/weatherStore";
2025-11-14 18:43:12 +08:00
2025-11-14 19:14:38 +08:00
//配置常量
const API_KEY = '0c4679ac2decfe6a756aa09e61f42dc1';
const BASE_URL = 'http://api.weatherstack.com';
2025-11-14 18:43:12 +08:00
2025-11-14 19:14:38 +08:00
//创建axios实例 统一请求头
const apiClient: AxiosInstance = axios.create({
baseURL: BASE_URL,
timeout: 10000,
headers: {
'Content-Type': 'application/json',
},
});
//请求拦截器
apiClient.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
config.params = {
...config.params,
access_key: API_KEY,
};
//打印请求信息
if (process.env.NODE_ENV === 'development') {
console.log('API Request:', config.method, config.url, config.params);
2025-11-14 18:43:12 +08:00
}
2025-11-14 19:14:38 +08:00
return config;
},
(error) => {
// 对请求错误做些什么
console.error('Request Error:', error);
return Promise.reject(error);
}
);
// 添加响应拦截器
apiClient.interceptors.response.use(
(response) => {
//状态为200时的错误
if (response.data && response.data.error ) {
const error = response.data.error;
console.error('API Error:', error);
throw new Error(error.info || '请求失败');
}//打印响应
if (process.env.NODE_ENV === 'development') {
console.log('API Response:', response.status, response.data);
2025-11-14 18:43:12 +08:00
}
2025-11-14 19:14:38 +08:00
return response;
},
(error:AxiosError) => {
//统一错误处理
console.error('Response Error:', error.message);
if (error.response) {
const status = error.response.status;
switch (status) {
case 404:
return Promise.reject(new Error('未找到该城市,请检查城市名称'));
case 401:
return Promise.reject(new Error('API认证失败请检查API密钥'));
case 403:
return Promise.reject(new Error('访问被拒绝,请稍后再试'));
case 429:
return Promise.reject(new Error('请求次数过多,请稍后再试'));
default:
return Promise.reject(new Error('服务器错误,请稍后再试'));
}
}else if(error.request){
return Promise.reject(new Error('网络连接失败,请检查网络状态'));
}else {
return Promise.reject(new Error('请求配置错误'));
}
}
2025-11-14 18:43:12 +08:00
);
2025-11-14 19:14:38 +08:00
//WeatherAPI
export class WeatherAPI {
static async getCurrentWeather(city: string): Promise<WeatherData> {
try {
const response = await apiClient.get<WeatherData>(
'/current',
{params : {query: city },
});
return response.data;
} catch (error) {
throw error;
}
}
}
export default apiClient;