详细讲解axios封装与api接口封装管理

一、axios封装

axios是基于promise的http客户端，用于浏览器和nodejs发送http请求，对它进行封装主要是为了统一管理请求配置和处理请求和响应的通用逻辑等。以下是常用的封装逻辑和要点

1：引入axios相关依赖

首先引用项目中的axios库，在nodejs项目中通常使用require语句，在基于现代js模块系统（如ES Module）的前端项目中则使用import来引入。实例如下

javascript 复制代码

import axios from 'axios'
//如果需要先处理环境变量等，可以引入相关模块，比如在Node.js中引入process模块来获取环境相关配置
// const process = require('process');

2：创建axios实例

直接使用axios的默认配置有时候不能满足项目需求，所以通常会创建一个axios实例，并在实例上配置一些通用的请求设置，比如基础URL，请求超时时间，请求头信息。示例代码如下

javascript 复制代码

const severce = axios.create({
  baseURL: process.env.VUE_APP_BASE_API || '/api',  // 可以从环境变量获取基础URL，如果没有则使用默认的'/api'，常用于根据不同环境（开发、生产等）切换后端接口地址
  timeout: 5000,  // 设置请求超时时间为5000毫秒（5秒），避免长时间无响应的请求一直挂起
  headers: {
    'Content-Type': 'application/json'  // 设置默认的请求头内容类型，根据实际项目后端要求可调整，比如也可能是'application/x-www-form-urlencoded'等
  }
})

3：请求拦截设置

请求拦截可以在每个请求发送前执行一些逻辑，常见的比如添加鉴权token到请求头中，显示加载动画等，示例代码如下：

javascript 复制代码

instance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');  // 从本地存储获取token，实际可能根据项目的登录认证机制来获取
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;  // 将token添加到请求头的Authorization字段，格式可能根据后端要求调整
    }
    // 这里也可以添加代码显示加载动画，比如使用一些UI库提供的加载组件来控制显示隐藏
    return config;
  },
  error => {
    return Promise.reject(error);  // 如果请求拦截出现错误，直接返回被拒绝的Promise，将错误传递下去
  }
);

4：响应拦截设置

响应拦截器用于在收到服务器响应后统一处理相关逻辑，例如根据响应状态码判断请求是否成功，处理业务错误提示，隐藏加载动画等，示例代码如下：

javascript 复制代码

instance.interceptors.response.use(
  response => {
    // 可以在这里隐藏加载动画，和请求拦截器中显示加载动画配合使用
    const { data, status } = response;
    if (status === 200) {  // 根据项目实际的成功状态码判断，这里假设200表示成功
      return data;
    } else {
      // 如果状态码不是200，可以在这里统一处理错误，比如弹出提示框等，然后返回一个被拒绝的Promise
      return Promise.reject(new Error('请求失败'));
    }
  },
  error => {
    // 处理响应出现的网络错误等情况，比如断网、服务器内部错误等，同样可以弹出错误提示，返回被拒绝的Promise
    return Promise.reject(error);
  }
);

5：导出封装后的axios实例

最后将封装好的axios实例导出，以便在项目其他地方可以方便的使用它来发送请求，示例代码如下：

javascript 复制代码

export default instance;

二、api 接口封装管理

在完成axios封装后，通常还会对项目的各个api接口，进行进一步的封装管理，这样做的好处是让接口调用更加清晰，易于维护和扩展，并且可以将接口相关的业务逻辑整合到一起

1：创建api文件模块

一般会按照功能模块或者业务模块来创建对应的api文件，

例如在一个电商项目中，可能有user.js用于管理用户的相关接口，product.js用于管理商品相关接口等。以 user.js 为例，示例代码如下：

javascript 复制代码

import instance from '@/axio(axios的路径)'  // 引入封装好的axios实例

// 用户登录接口封装
export const login =（params传递过来的参数）=>{
     // 发送POST请求到/user/login路径，params为传递给后端的登录参数，返回的是一个Promise，方便        在调用处使用.then()和.catch()处理结果和错误

    return instance.post('接口路径',params)

}

// 获取用户信息接口封装
export const getUserInfo =（params传递过来的参数）=>{

     // 发送GET请求获取用户信息，同样返回Promise
    return instance.post('接口路径',params)

}

2：整合api接口

可以创建一个统一的api目录，将各个api的文件放在里面，然后创建一个index.js文件（或者其他合适的整合文件名称）来统一导出所有的接口函数，方便在项目的其他地方（比如组件中）一次性引入使用。示例代码如下：

javascript 复制代码

import { login } from './user';
import { getProductList } from './product';

export default {
  login,
  getProductList
};

3：在组件等地方使用封装后的api接口

在 Vue 组件或者其他 JavaScript 模块中使用封装后的 API 接口时，代码会变得简洁且逻辑清晰，示例如下（以 Vue 组件为例）：

javascript 复制代码

<template>
  <div>
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
import api from '@/api';  // 引入整合后的api接口

export default {
  methods: {
    async handleLogin() {
      const params = { username: 'test', password: '123456' };
      try {
        const result = await api.login(params);  // 调用登录接口，使用await等待异步结果
        console.log('登录成功', result);
        // 可以在这里进行后续操作，比如保存登录信息、跳转到其他页面等
      } catch (error) {
        console.log('登录失败', error);
        // 处理登录失败的情况，比如弹出提示框等
      }
    }
  }
};
</script>

通过对 axios 进行封装以及进一步对 api 接口进行封装管理，能够让项目中的 HTTP 请求处理更加规范、高效，便于不同开发人员协作以及后续项目的维护和扩展。同时，也能更好地处理请求和响应过程中的各种业务逻辑和异常情况。