当前位置：首页 > news >正文

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

news 来源：原创 2025/4/22 6:10:10

引言

在现代前端开发中，与后端 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);});