axios二次封装流程

axios是一个常用的基于Promise的HTTP客户端库，可以用于浏览器和Node.js环境中进行HTTP请求。二次封装axios可以将axios的使用变得更加方便，一般的封装流程如下：

1. 创建一个axios实例：可以通过axios.create()方法创建一个新的axios实例，该实例可以自定义默认的请求配置等属性。

2. 添加请求拦截器：可以通过axios.interceptors.request.use()方法添加请求拦截器，该拦截器可以对请求进行统一处理，例如添加请求头信息、请求参数转换等。

3. 添加响应拦截器：可以通过axios.interceptors.response.use()方法添加响应拦截器，该拦截器可以对响应进行统一处理，例如对响应数据进行转换、统一处理错误等。

4. 封装请求方法：可以根据实际需求封装常用的请求方法，例如get、post等，该方法可以根据自定义的axios实例、请求路径、请求参数等发送请求，并返回一个Promise对象。

5. 使用封装好的请求方法：在需要发送请求的地方，调用封装好的请求方法即可发送请求。

6. 错误处理：可以在请求方法中添加错误处理，对错误进行统一处理，例如弹窗提示、跳转错误页面等。

以上就是axios二次封装的基本流程，根据实际需求可以进行相应的扩展和优化。

相关问题

axios二次封装的流程

对于axios的二次封装，一般可以遵循以下流程:

1. 创建一个封装的axios实例: 首先，你可以在你的项目中创建一个独立的axios实例，通过调用axios.create()方法来创建。你可以配置一些通用的属性，比如baseURL、headers等。

2. 设置拦截器: 使用拦截器可以在请求发送之前或响应返回之后进行全局的处理。通过调用axios实例的interceptors属性，分别设置请求拦截器和响应拦截器。请求拦截器可以用来添加请求头、处理请求参数等，响应拦截器可以用来统一处理错误信息、响应数据等。

3. 封装请求方法: 在封装过程中，你可以根据项目需求，将常用的HTTP请求方法（如GET、POST、PUT、DELETE等）封装成自定义的函数。在这些函数中，你可以使用封装好的axios实例来发送请求，并根据需要对请求进行处理，例如添加公共参数、处理异常等。

4. 处理错误信息: 在封装过程中，你可以通过使用try-catch语句来捕获请求过程中可能出现的异常，并对异常进行处理。你可以自定义错误码、错误信息，并将其返回给调用方。

5. 导出封装好的请求方法: 将封装好的请求方法导出，供其他模块或组件使用。

总体而言，axios的二次封装可以帮助我们简化请求的配置和处理过程，提高代码的可维护性和复用性。同时，封装过程中可以根据项目需求添加一些额外的功能，如统一错误处理、请求超时设置等，来提升开发效率和用户体验。

axios二次封装模板

### Axios 二次封装示例

#### 封装基础请求功能

为了简化 HTTP 请求操作并增强可维护性和扩展性，可以创建一个 `request.js` 文件来集中管理所有的网络请求配置。此文件不仅会处理基本的 GET 和 POST 方法，还会加入全局错误处理机制以及拦截器用于执行预定义的操作。

import axios from 'axios';

// 创建一个新的实例以便于自定义设置
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // API 的 base_url
    timeout: 5000                          // 请求超时时间
});

/// 添加请求拦截器，在发送请求前做一些事情
service.interceptors.request.use(
    config => {
        // 如果存在 token，则将其添加到请求头中
        const token = localStorage.getItem('token');
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`;
        }
        return config;
    },
    error => {
        console.error(error); // 对请求错误做些什么
        return Promise.reject(error);
    }
);

/// 添加响应拦截器，在接收到响应数据之后做一些事
service.interceptors.response.use(
    response => response.data,
    error => {
        console.error(error); // 对响应错误做些处理
        return Promise.reject(error);
    }
);

// 定义通用GET请求方法
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        service.get(url, {params})
               .then(response => resolve(response))
               .catch(err => reject(err));
    });
}

// 定义通用POST请求方法
export function post(url, data = {}, config = {}) {
    return new Promise((resolve, reject) => {
        service.post(url, data, config)
              .then(response => resolve(response))
              .catch(err => reject(err));
    });
}

上述代码展示了如何基于 Vue 应用程序环境变量中的基地址创建了一个带有默认参数的新 Axios 实例，并设置了两个重要的中间件——一个是用来修改即将发出的请求；另一个则是针对返回的数据进行初步过滤[^2]。

此外，还实现了简单的 GET/POST 接口调用方式，允许开发者更方便地发起异步请求而无需每次都重复编写相同的逻辑结构[^3]。

#### 加入额外的功能特性

考虑到实际开发过程中可能遇到的需求变化和技术挑战，可以在原有基础上进一步优化这个工具库：

- **加载状态显示**：当页面正在等待来自服务器的信息更新时向用户提供反馈。

- **自动刷新令牌**：如果检测到认证失败是因为访问令牌已失效引起的话尝试重新获取新的有效凭证继续未完成的任务而不是立即终止流程。

这些改进措施能够显著提升用户体验质量同时也让前端工程师们的工作变得更加高效有序。