深入了解Axios TypeScript：一种更好的HTTP客户端解决方案

发布时间：2023-05-17

现代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，我们鼓励你在下一个项目中试试。

推荐文章