共计 1543 个字符,预计需要花费 4 分钟才能阅读完成。
当应用 TypeScript 封装 Axios 时,你能够创立一个专门的 HTTP 服务模块,用于治理所有的 HTTP 申请。上面是一个简略的示例,展现了如何应用 TypeScript 封装 Axios:
首先,确保你曾经装置了 Axios 和 TypeScript。你能够应用 npm 或 yarn 来装置它们:
bash
npm install axios typescript --save
创立一个名为 http.service.ts 的文件,并增加以下代码:typescript
import axios, {AxiosRequestConfig, AxiosResponse} from 'axios';
// 创立 Axios 实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置根底 URL
timeout: 5000, // 设置申请超时工夫
});
// 定义申请拦截器
instance.interceptors.request.use((config: AxiosRequestConfig) => {
// 在发送申请之前做些什么
// 例如,增加申请头、身份验证等
return config;
},
(error) => {
// 对申请谬误做些什么
return Promise.reject(error);
}
);
// 定义响应拦截器
instance.interceptors.response.use((response: AxiosResponse) => {
// 对响应数据做点什么
// 例如,解决错误代码、解析 JSON 数据等
return response.data;
},
(error) => {
// 对响应谬误做点什么
return Promise.reject(error);
}
);
// 导出 Axios 实例
export default instance;
在下面的代码中,咱们首先创立了一个 Axios 实例,并设置了根底 URL 和申请超时工夫。而后,咱们定义了申请拦截器和响应拦截器,用于在发送申请之前和接管响应之后执行一些操作。你能够依据本人的需要自定义这些拦截器的行为。
在须要应用 HTTP 申请的文件中,导入刚刚创立的 http.service.ts 文件,并应用它来发送申请。例如,在 api.ts 文件中:
typescript
import http from './http.service';
// 定义一个获取用户列表的函数
export const getUsers = async () => {
try {const response = await http.get('/users');
return response;
} catch (error) {console.error('Error fetching user list:', error);
throw error;
}
};
在下面的代码中,咱们导入了 http 实例,并应用它来发送一个 GET 申请到 /users 门路。你能够依据本人的 API 接口来批改门路和申请办法。
最初,在你的应用程序中应用 api.ts 文件中定义的函数来发送申请。例如,在组件中:
typescript
import {getUsers} from './api';
// 在组件中调用 getUsers 函数
async componentDidMount() {
try {const users = await getUsers();
console.log('Users:', users);
} catch (error) {console.error('Error fetching user list:', error);
}
}
这样,你就胜利地应用 TypeScript 封装了 Axios,并在你的应用程序中应用了封装后的 HTTP 服务。你能够依据须要扩大和自定义这个服务,以满足你的我的项目需要。
正文完
发表至: javascript
2024-03-05