面向美团后端的axios封装终极指南：一次封装，终生受益

前端

2024-02-19 18:39:19

有一天，美团的一个姑娘向我求助，希望我帮她写一些前端代码，于是我到凌晨两点才把代码写完，身心俱疲。经历了这件事后，我写了这篇文章《axios封装》，目的是希望美团的前端开发人员在未来的工作中能够写出更好的前端代码。

Axios简介

Axios是一个基于Promise的HTTP库，可以用于浏览器和node.js。它可以轻松地发送异步HTTP请求，并处理服务器响应。

Axios封装的优点

axios封装有很多优点，包括：

提高代码的可读性和可维护性 ：axios封装可以将代码组织成更易于阅读和维护的模块。
减少代码冗余 ：axios封装可以减少代码冗余，提高代码的可重用性。
提高开发效率 ：axios封装可以提高开发效率，使开发人员可以专注于业务逻辑，而无需担心底层HTTP请求的细节。
提供统一的错误处理机制 ：axios封装可以提供统一的错误处理机制，简化错误处理流程。

Axios封装的步骤

axios封装的步骤如下：

安装axios库 ：
- 使用npm安装axios库：npm install axios
创建axios实例 ：
- 创建一个axios实例，并设置默认配置，如超时时间、请求头等。
封装axios方法 ：
- 将axios实例封装成各种方法，如get、post、put、delete等。
使用封装好的axios方法发送请求 ：
- 使用封装好的axios方法发送请求，并处理服务器响应。

Axios封装示例

下面是一个axios封装的示例：

// 导入axios库
import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 封装axios方法
const get = (url, params) => {
  return instance.get(url, { params });
};

const post = (url, data) => {
  return instance.post(url, data);
};

const put = (url, data) => {
  return instance.put(url, data);
};

const del = (url) => {
  return instance.delete(url);
};

// 使用封装好的axios方法发送请求
get('/user/info').then((res) => {
  console.log(res.data);
});

post('/user/create', { name: 'John Doe', age: 30 }).then((res) => {
  console.log(res.data);
});

put('/user/update', { id: 1, name: 'Jane Doe', age: 31 }).then((res) => {
  console.log(res.data);
});

del('/user/delete').then((res) => {
  console.log(res.data);
});