Words etch cherished moments.
OG

封装通用axios请求库

1,881 words, 5 min read
2019/11/27 AM
297 views

在前端开发中,Axios 是一个非常流行的库,用于发送 HTTP 请求。为了提高代码的可维护性和复用性,对 Axios 进行封装并统一管理 API 接口是一种常见的做法。

#安装 Axios

首先,确保你的项目中已安装 Axios。如果未安装,可以通过 npm 或 yarn 来安装:

          
  • 1
  • 2
  • 3
npm install axios # 或者 yarn add axios

#Axios 封装

我们在src目录下utils目录下创建一个名为 request.js(或你自定义的文件名)的文件,用于存放封装后的 Axios 实例。这样做的好处是可以统一处理请求和响应的错误、设置基础URL、添加请求头等。

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
// request.js import axios from 'axios'; // 创建 axios 实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 根据环境变量设置基础URL timeout: 5000, // 请求超时时间 }); // 请求拦截器 service.interceptors.request.use( (config) => { // 在发送请求之前做些什么,例如添加Token // config.headers['Authorization'] = `Bearer ${token}`; return config; }, (error) => { // 对请求错误做些什么 return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( (response) => { // 对响应数据做点什么 return response.data; }, (error) => { // 对响应错误做点什么 console.error('API 请求出错:', error); // 打印错误信息 return Promise.reject(error); } ); export default service;

#使用

接下来,在src目录下创建api目录,并创建你需要的模块,比如user.jsarticle.js等。来集中管理所有 API 接口。这样可以使得接口调用更加清晰和方便。

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
// article.js import request from '@/utils/request'; // 导入上面封装的 axios 实例 // 文章相关API export function getArticles(params) { return request({ url: "/articles", method: "get", params }); }

上述使用的示例中用到了 @/utils/request,这是创建了alias别名,可以看我的这篇文章 vscode中vue文件路径别名后路径提示

#使用示例

在你的组件中,你可以直接导入这些封装好的API函数来使用它们:

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
import { getArticles } from '@/api/article'; getArticles({ page: 1, pageSize: 10 }) .then((res) => { console.log(res); // 响应成功后的数据 }) .catch((err) => { console.error('请求失败:', err); });

通过这样的封装和管理,你的项目结构会更加清晰,API 调用也会变得更加简洁和统一,便于维护和扩展。

Creative Commons BY-NC 4.0
https://zhangwurui.cn/article/66
0/0comments
Guest
Start the discussion...
Be the first to comment