axios 最详细封装

axios 是一个基于 Promise 的 HTTP 库，用于进行浏览器和 Node.js 中的网络请求。它是目前前端开发中最常用的网络请求库之一，具有强大的功能和灵活的配置选项。

在封装 axios 时，我们可以根据业务需求进行全局设置，统一处理请求和响应的拦截器，以及自定义请求方法和实例。下面是对 axios 进行详细封装的示例：

1. 安装 axios
通过 npm 或 yarn 安装 axios：`npm install axios` 或 `yarn add axios`

2. 创建封装文件
在项目中创建一个名为 axios.js 的文件，并导入 axios：

   import axios from 'axios';

3. 创建实例
使用 axios.create 方法创建一个 axios 实例，并设置全局配置：

   const instance = axios.create({
     baseURL: 'https://api.example.com', // 设置基础URL
     timeout: 5000 // 设置请求超时时间
   });

4. 设置拦截器
通过 instance.interceptors.request.use 和 instance.interceptors.response.use 方法设置请求和响应拦截器：

   // 请求拦截器
   instance.interceptors.request.use(config => {
     // 在请求发送前可以进行一些操作，如添加请求头
     config.headers['Authorization'] = 'Bearer xxx';
     return config;
   }, error => {
     return Promise.reject(error);
   });

   // 响应拦截器
   instance.interceptors.response.use(response => {
     // 在响应返回前可以进行一些操作，如处理通用错误码
     if (response.data.code === 200) {
       return response.data.data;
     } else {
       return Promise.reject(response.data);
     }
   }, error => {
     return Promise.reject(error);
   });

5. 自定义请求方法
在封装文件中，可以根据业务需求，编写 get、post、put、delete 等常用请求方法：

   export function get(url, params) {
     return instance.get(url, { params });
   }

   export function post(url, data) {
     return instance.post(url, data);
   }

   export function put(url, data) {
     return instance.put(url, data);
   }

   export function del(url) {
     return instance.delete(url);
   }

通过以上封装，我们可以在项目中愉快地使用封装的 axios 进行网络请求，使得代码更加清晰、简洁，并且方便进行全局配置和拦截处理。