现代Web应用程序不再只是简单地返回静态页面,它们还需要使用HTTP与Web服务交互。在人们构建Web应用程序时,构建健壮的API以与客户端进行有效通信和处理HTTP请求和响应至关重要。
虽然JavaScript API 原生支持浏览器发送HTTP请求,但Axios作为一个基于Promise的http库提供了一种更好的开发方式,它能够处理网络请求及响应并支持拦截器,提供了一个类似于jQuery AJAX或Zepto AJAX的简单基于GET和POST请求的API。同时,如果你正在使用TypeScript,那么 Axios TypeScript在类型安全方面的优势是无法比拟的。
一、为什么使用Axios TypeScript?
如前所述,Axios TypeScript在类型安全方面的优势是无法比拟的。它提供了额外的类型信息,以帮助你避免常见的错误,例如元素未定义、未定义的函数或属性等。此外,Axios TypeScript 使用 TypeScript 加强了应用程序的类型安全性,并提供了诸如类型化相应数据和与服务端进行类型检查等优势。
除此之外,Axios TypeScript提供了一个易于使用的链式 API,易于阅读,使你可以更轻松地执行诸如请求拦截、响应拦截、取消请求等操作。例如,可以使用 Axios TypeScript 将授权头添加到在请求中发送的每个请求的头中:
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
此外,Axios TypeScript还提供了超时调用、自动转换响应数据、错误处理、CSRF支持等功能。
二、如何使用Axios TypeScript?
在使用Axios TypeScript之前,首先需要安装。使用npm可以很容易地安装它:
npm install axios
随后,我们可以非常方便地初始化一个Axios实例,然后可以使用不同的配置选项进行调整。以下是创建 Axios 实例的示例代码,它引入了一些常见配置选项:
import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'; const defaultOptions: AxiosRequestConfig = { baseURL: 'https://api.example.com/api/', headers: { 'Content-Type': 'application/json' }, }; const instance: AxiosInstance = axios.create(defaultOptions); export default instance;
上面的代码中,我们首先通过向创建 Axios实例传递默认选项来设置与服务端通信,这里指示 Axios 请求的基本URL。我们还提供了一个默认的HTTP头部并将其标记为 'application/json'。
在与服务端进行通信时,可以使用Axios实例的 get,post,put 和 delete方法来创建请求。以下是使用Axios 实例的示例代码:
import axios from './axios-config'; const requestWithAxios = () => { return axios .get('/endpoint?name=test') .then(response => { console.log(response.data); }); };
在上面的代码片段中,我们通过向Axios实例get方法传递URL,带有查询字符串名称为名称的值为test, 以获取服务器数据。在请求成功时,我们会在控制台上看到响应打印出来的数据。
三、Axios TypeScript的拦截器
一个重要的功能常常是访问请求和响应数据,在HTTP请求链中添加自定义逻辑,以便在请求,响应等过程中使用这些数据。拦截器为这些通用情况提供了一个清晰的解决方案,这样您就可以轻松地注入逻辑。
Axios TypeScript提供两个拦截器:请求拦截器和响应拦截器。以下是它们的工具代码:
// 请求拦截器 axios.interceptors.request.use( (config: AxiosRequestConfig) => { // Do something before request is sent return config; }, error => { // Do something with request error return Promise.reject(error); }, ); // 响应拦截器 axios.interceptors.response.use( response => { // Do something with response data return response; }, error => { // Do something with response error return Promise.reject(error); }, );
Axios TypeScript拦截器返回AxiosPromise对象,该对象允许我们在拦截器中执行自定义逻辑,例如:取消请求、重试请求、添加通用授权标头或处理全局错误。在请求和响应拦截器中,还可以对发送和接收respond数据进行修改。
这里是一个重试请求的示例:
axios.interceptors.response.use(undefined, async err => { const error = err.response; const originalConfig = err.config; // 错误处理和重试逻辑 ... if (error.status === 401 && !originalConfig.__isRetryRequest) { originalConfig.__isRetryRequest = true; try { const rs = await axios.request(originalConfig); console.log('retry response'); return rs; } catch (err) { console.log('retry error'); return Promise.reject(err); } } return Promise.reject(error); });
在上面的代码片段中,我们首先获取错误响应和原始配置,并根据响应状态检查是否应进行重试。如果我们已经尝试了一次重试,则不重试。我们使用Axios 实例的 request方法再次发出一次HTTP请求,并在成功时打印响应。
四、Axios TypeScript的取消请求
取消请求对于提高 Web 应用程序的性能至关重要。它使我们可以取消不再需要的请求,以避免浪费带宽和其他资源。在大多数Web应用程序中,用户会频繁地跳转页面或更改页面数据,取消不需要的请求在这些用例中尤为重要,可以帮助减轻服务器的负担并提高网络速度。
Axios TypeScript提供了取消请求的功能,它提供了一个axios.CancelToken工厂,通过与需要取消的请求一起使用,我们可以请求取消请求。以下是 Axios TypeScript取消请求的示例:
import axios from './axios-config'; const cancelTokenSource = axios.CancelToken.source(); // <-- axios .get('/endpoint', { cancelToken: cancelTokenSource.token, // <-- params: { name: 'test' }, }) .then(response => { console.log(response.data); }) .catch(thrown => { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { console.log(thrown); } }); cancelTokenSource.cancel('Operation canceled by the user.'); // <--
在上面的代码片段中,我们首先创建一个axios.CancelToken.source,然后我们将它传递给我们的get请求。在请求成功或失败时,我们进行适当处理。最后,我们通过调用cancelTokenSource.cancel('被用户取消的操作')方法来取消我们的请求。
五、结论
总之,Axios TypeScript是使用TypeScript构建Web应用程序时的一个极好的选择。它提供了以类型安全方式执行HTTP请求和响应所需要的实用程序和工具,并且在其API设计和使用中看起来非常直观易用。如果你还没有使用过Axios TypeScript,我们鼓励你在下一个项目中试试。