使用 Axios 进行 API 请求与接口封装：打造高效稳定的前端数据交互

引言

在现代前端开发中，与后端 API 进行数据交互是一项核心任务。Axios 作为一个基于 Promise 的 HTTP 客户端，以其简洁易用、功能强大的特点，成为了前端开发者处理 API 请求的首选工具。本文将深入探讨如何使用 Axios 进行 API 请求，并介绍如何对接口进行封装，以提高代码的可维护性和复用性。

什么是 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js 环境。它具有以下优点：

• 支持 Promise API ：可以使用 async/await 或 .then() 和 .catch() 方法处理请求结果，避免回调地狱。
• 拦截请求和响应：可以在请求发送前和响应返回后进行拦截，添加统一的处理逻辑，如添加请求头、处理错误等。
• 转换请求和响应数据：可以对请求数据和响应数据进行转换，如将数据转换为 JSON 格式。
• 取消请求：支持取消请求，避免不必要的请求浪费资源。

安装 Axios

在开始使用 Axios 之前，需要先安装它。可以使用 npm 或 yarn 进行安装：

npm install axios
# 或者
yarn add axios

基本的 Axios 请求

GET 请求

import axios from 'axios';

// 发送 GET 请求
axios.get('https://api.example.com/data')
 .then(response => {
    console.log(response.data);
  })
 .catch(error => {
    console.error(error);
  });

POST 请求

import axios from 'axios';

const data = {
  name: 'John Doe',
  age: 30
};

// 发送 POST 请求
axios.post('https://api.example.com/create', data)
 .then(response => {
    console.log(response.data);
  })
 .catch(error => {
    console.error(error);
  });

接口封装的必要性

在实际项目中，如果直接在组件中使用 Axios 进行请求，会导致代码重复、难以维护。通过接口封装，可以将 API 请求的逻辑集中管理，提高代码的可维护性和复用性。

封装 Axios 实例

创建 Axios 实例

import axios from 'axios';

// 创建 Axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在请求发送前可以添加统一的请求头
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据进行处理
  return response.data;
}, error => {
  // 处理响应错误
  console.error('请求出错:', error);
  return Promise.reject(error);
});

export default instance;

封装接口方法

import axiosInstance from './axiosInstance';

// 获取数据接口
export const getData = () => {
  return axiosInstance.get('/data');
};

// 创建数据接口
export const createData = (data) => {
  return axiosInstance.post('/create', data);
};

在项目中使用封装的接口

import { getData, createData } from './api';

// 获取数据
getData()
 .then(data => {
    console.log('获取到的数据:', data);
  })
 .catch(error => {
    console.error('获取数据失败:', error);
  });

// 创建数据
const newData = {
  name: 'Jane Smith',
  age: 25
};
createData(newData)
 .then(response => {
    console.log('创建成功:', response);
  })
 .catch(error => {
    console.error('创建失败:', error);
  });

错误处理与重试机制

错误处理

在响应拦截器中已经对错误进行了基本的处理，但在实际项目中，可能需要根据不同的错误状态码进行不同的处理。

instance.interceptors.response.use(response => {
  return response.data;
}, error => {
  if (error.response) {
    // 请求已发送，服务器返回了非 2xx 的状态码
    switch (error.response.status) {
      case 401:
        // 未授权，跳转到登录页面
        console.log('未授权，请登录');
        break;
      case 404:
        // 请求的资源不存在
        console.log('请求的资源不存在');
        break;
      case 500:
        // 服务器内部错误
        console.log('服务器内部错误');
        break;
      default:
        console.error('未知错误:', error.response.status);
    }
  } else if (error.request) {
    // 请求已发送，但没有收到响应
    console.error('没有收到服务器响应');
  } else {
    // 在设置请求时发生错误
    console.error('请求设置出错:', error.message);
  }
  return Promise.reject(error);
});

重试机制

在网络不稳定的情况下，可能会出现请求失败的情况。可以实现一个简单的重试机制，在请求失败时进行重试。

const MAX_RETRIES = 3;

const retryRequest = (config, retries = 0) => {
  return new Promise((resolve, reject) => {
    instance(config)
     .then(response => {
        resolve(response);
      })
     .catch(error => {
        if (retries < MAX_RETRIES) {
          console.log(`请求失败，第 ${retries + 1} 次重试...`);
          retryRequest(config, retries + 1).then(resolve).catch(reject);
        } else {
          reject(error);
        }
      });
  });
};

// 使用重试机制发送请求
const config = {
  method: 'get',
  url: '/data'
};
retryRequest(config)
 .then(data => {
    console.log('最终获取到的数据:', data);
  })
 .catch(error => {
    console.error('多次重试后仍失败:', error);
  });

总结

通过使用 Axios 进行 API 请求，并对接口进行封装，可以提高代码的可维护性和复用性。同时，合理的错误处理和重试机制可以增强应用的稳定性和健壮性。在实际项目中，根据具体需求对 Axios 进行定制和扩展，能够更好地满足业务的要求。希望本文能帮助你更好地掌握 Axios 的使用和接口封装技巧。

希望这篇博客能对你有所帮助，感兴趣的话，请在评论区留言讨论吧！！