关于javascript:ts-封装axios

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