使用 Axios 进行 API 请求与接口封装

在现代前端开发中，数据请求是一个不可避免的部分。尤其是与后端进行数据交互时，我们需要一种简洁且高效的方式来发送 HTTP 请求，获取或提交数据。Axios 是一个基于 Promise 的 HTTP 客户端库，广泛应用于前端开发中。它支持 GET、POST、PUT、DELETE 等请求，并能在请求和响应时进行拦截与处理。本文将深入介绍如何使用 Axios，并封装常用的接口方法，使代码更加清晰、易于维护。

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端库，适用于浏览器和 Node.js 环境。它能简化 HTTP 请求的发送，并提供许多方便的功能，如请求和响应的拦截、自动转换 JSON 数据、处理请求取消等。使用 Axios，我们可以以更简洁的方式与服务器进行数据交互，提升开发效率。

安装 Axios

在一个基于 npm 或 yarn 的项目中，使用 Axios 非常简单。通过以下命令安装即可：

javascript 复制代码

npm install axios
# 或者
yarn add axios

基本使用

在安装完 Axios 后，你就可以在项目中导入并使用它了。下面是一些常见的请求示例：

1. 发送 GET 请求

javascript 复制代码

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log('响应数据:', response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

2. 发送 POST 请求

javascript 复制代码

import axios from 'axios';

const data = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

axios.post('https://jsonplaceholder.typicode.com/posts', data)
  .then(response => {
    console.log('响应数据:', response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

3. 设置请求头

javascript 复制代码

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts', {
  headers: {
    'Authorization': 'Bearer token'
  }
})
  .then(response => {
    console.log('响应数据:', response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

通过 headers 属性，我们可以在请求中添加自定义的请求头信息，常见的如 Authorization。

请求和响应拦截器

Axios 提供了请求拦截器和响应拦截器，可以在请求发送之前或者响应返回之后对数据进行处理。例如，可以在请求时加上统一的 token，或者在响应时进行错误处理。

设置请求拦截器

请求拦截器可以在请求发送前进行一些处理，例如加入认证 Token，修改请求头等。

javascript 复制代码

axios.interceptors.request.use(config => {
  // 在请求发送之前，加入 token 等公共信息
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
  return config;
}, error => {
  return Promise.reject(error);
});

在上述代码中，我们通过请求拦截器在每个请求中自动加入了 Authorization token。

设置响应拦截器

响应拦截器可以在收到服务器响应之后进行处理。在响应拦截器中，我们可以处理一些统一的逻辑，比如统一错误提示，或是处理数据格式等。

javascript 复制代码

axios.interceptors.response.use(response => {
  // 对响应数据进行处理
  return response.data;
}, error => {
  // 对错误响应进行处理
  if (error.response) {
    console.error('服务器返回错误:', error.response.status);
  } else if (error.request) {
    console.error('请求未收到响应:', error.request);
  } else {
    console.error('发生错误:', error.message);
  }
  return Promise.reject(error);
});

通过响应拦截器，我们可以对响应数据进行格式化，或者在发生错误时进行统一的处理。

接口封装

直接在各个组件中使用 Axios 进行请求会导致代码重复，而且不方便维护。因此，通常我们会封装一个统一的接口方法，将所有的 API 请求集中管理。

1. 创建 API 封装模块

首先，我们创建一个 api.js 文件来集中管理所有接口的请求。通过封装，可以避免在各个组件中重复编写 Axios 请求。

javascript 复制代码

import axios from 'axios';

// 创建 axios 实例
const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 10000,
});

// 请求拦截器
apiClient.interceptors.request.use(config => {
  // 可以在这里设置通用请求头
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
apiClient.interceptors.response.use(response => {
  return response.data; // 只返回数据，简化操作
}, error => {
  return Promise.reject(error);
});

export default apiClient;

在上面的代码中，我们创建了一个 Axios 实例，并在请求和响应拦截器中进行了必要的配置。这样，所有接口请求都可以使用这个实例，统一管理。

2. 封装 API 请求

接下来，我们为每个接口封装具体的请求方法。例如，获取帖子列表、创建帖子等 API 请求：

获取帖子列表

javascript 复制代码

import apiClient from './api';

export const getPosts = () => {
  return apiClient.get('/posts');
};

创建新帖子

javascript 复制代码

import apiClient from './api';

export const createPost = (postData) => {
  return apiClient.post('/posts', postData);
};

更新帖子

javascript 复制代码

import apiClient from './api';

export const updatePost = (id, postData) => {
  return apiClient.put(`/posts/${id}`, postData);
};

删除帖子

javascript 复制代码

import apiClient from './api';

export const deletePost = (id) => {
  return apiClient.delete(`/posts/${id}`);
};

总结

封装 Axios 请求可以显著提高代码的可维护性和复用性。通过封装 API 请求，我们可以统一管理请求逻辑、错误处理和请求头设置等内容，让每个 Vue 组件只关注自己的业务逻辑，保持代码的简洁和清晰

本文要点总结：

使用 Axios 发送 HTTP 请求。
设置请求拦截器和响应拦截器，统一处理请求与响应。
封装常用的 API 请求，避免代码重复。

通过这种方式，我们能够更好地管理前端与后端的通信，保证代码的高效与整洁。

希望这篇博客对你有所帮助！如果有任何问题或建议，欢迎留言讨论。