您的位置:

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

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