二次封装axios，一劳永逸！

前端

2022-11-18 01:52:40

二次封装 Axios，提升 HTTP 请求的效率和安全性

引言

在现代前端开发中，发送 HTTP 请求是司空见惯的事情。Axios 是一个流行且功能强大的库，简化了 HTTP 请求的过程。然而，对于复杂的项目需求来说，二次封装 Axios 具有不可估量的价值。

二次封装的优势

对 Axios 进行二次封装可以带来以下显著优势：

统一管理 HTTP 请求： 集中管理所有 HTTP 请求，便于维护和管理。
简化 HTTP 请求编写： 二次封装简化了 HTTP 请求的编写，提高了开发效率。
增强 HTTP 请求安全性： 通过二次封装，可以提升 HTTP 请求的安全性，防止常见安全攻击。

如何对 Axios 进行二次封装

二次封装 Axios 的步骤如下：

1. 创建一个 Axios 实例

import axios from 'axios';

const service = axios.create({
  baseURL: '', // 填写你的基础 URL
  timeout: 60000, // 填写你的超时时间
});

2. 封装 HTTP 请求方法

封装 GET、POST、PUT 和 DELETE 等 HTTP 请求方法，如下所示：

// GET 请求方法
export function get(url, params) {
  return service.get(url, { params });
}

// POST 请求方法
export function post(url, data) {
  return service.post(url, data);
}

// PUT 请求方法
export function put(url, data) {
  return service.put(url, data);
}

// DELETE 请求方法
export function delete(url) {
  return service.delete(url);
}

3. 使用封装后的 HTTP 请求方法

使用封装后的 HTTP 请求方法，只需传入请求 URL 和参数即可，如下所示：

// GET 请求示例
get('/api/users', { page: 1, size: 10 }).then((response) => {
  console.log(response.data);
});

// POST 请求示例
post('/api/users', { name: '张三', age: 20 }).then((response) => {
  console.log(response.data);
});

// PUT 请求示例
put('/api/users/1', { name: '李四', age: 30 }).then((response) => {
  console.log(response.data);
});

// DELETE 请求示例
delete('/api/users/1').then((response) => {
  console.log(response.data);
});