返回

高效使用axios：自定义封装方法解析

前端

axios简介

axios是一个基于Promise的HTTP客户端，可以轻松地发送异步HTTP请求。它可以在浏览器和Node.js中使用，并支持各种HTTP方法，如GET、POST、PUT和DELETE。

创建axios实例

首先，您需要创建一个axios实例。这可以通过调用axios.create()方法来实现。该方法接受一个可选的配置对象作为参数，您可以使用该对象来配置axios实例的行为。

const axiosInstance = axios.create({
  baseURL: 'https://example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

在上面的例子中，我们创建了一个axios实例，并指定了基本URL、超时时间和请求头。

配置拦截器

拦截器是axios的一个强大功能，它允许您在请求发送或响应返回之前对请求或响应进行拦截。您可以使用拦截器来做一些事情，比如添加授权头、记录请求或响应数据，或者处理错误。

要配置拦截器，您可以使用axios.interceptors.request.use()和axios.interceptors.response.use()方法。这两个方法都接受两个回调函数作为参数，第一个回调函数用于处理请求或响应，第二个回调函数用于处理错误。

axiosInstance.interceptors.request.use((config) => {
  // 在请求发送之前做一些事情
  return config;
});

axiosInstance.interceptors.response.use((response) => {
  // 在响应返回之后做一些事情
  return response;
}, (error) => {
  // 处理错误
  return Promise.reject(error);
});

在上面的例子中，我们配置了一个请求拦截器和一个响应拦截器。请求拦截器会在请求发送之前被调用，它会添加一个授权头。响应拦截器会在响应返回之后被调用，它会记录响应数据。

自定义请求方法

您可以使用axios.request()方法来发送自定义请求。该方法接受一个配置对象作为参数，您可以使用该对象来指定请求方法、URL、数据和请求头。

axiosInstance.request({
  method: 'GET',
  url: '/users',
  params: {
    page: 1,
    size: 10,
  },
});

在上面的例子中，我们发送了一个GET请求到/users端点，并指定了分页参数。

总结

axios是一个强大的HTTP客户端，它可以帮助您轻松地发送异步HTTP请求。您可以使用axios来创建自定义axios实例、配置拦截器和发送自定义请求。这些特性使axios成为一个非常灵活的工具，可以满足各种开发需求。