当前位置：首页 > article >正文

vue axios请求二次封装以及解释（直接cv实用版）

article 2024/10/26 18:24:19

vue axios请求封装

用来总结和学习，便于自己查找

文章目录

一、为什么使用请求统一封装?
二、安装 Axios？
三、创建 Axios 封装文件？
3.1 重要代码
四、在 Vue 项目中如何使用封装好Axios？

一、为什么使用请求统一封装?

1. 减少重复代码
请求的 baseURL、超时设置、请求头处理（如 token 认证）、错误处理等。通过统一封装，这些公共逻辑只需编写一次，在需要请求时直接调用封装后的接口即可，大大减少了重复代码。

2. 集中管理
统一封装请求后，所有的请求配置、拦截器、错误处理逻辑都可以集中管理。当 API 变化时，或者需要对请求逻辑做统一调整时，只需修改封装文件中的代码，避免了在各个组件中查找和修改的麻烦。

例如，后端 API 地址变化了，只需修改封装文件中的 baseURL，而不需要修改每个 API 调用的地方。

3. 提高代码可维护性
通过请求的统一封装，所有 API 请求都集中到一处进行管理。在多人协作开发中，如果每个开发者都自己写请求逻辑，容易导致代码风格不一致、错误处理不统一等问题。统一封装能够提高代码的一致性、可维护性，方便后期调试和维护。

4. 统一错误处理
在请求拦截器中，可以统一处理不同的 HTTP 响应状态码（如 401 未授权、500 服务器错误等），给用户友好的提示，避免在各个组件中重复编写相同的错误处理逻辑。比如，401 未认证时，可以统一跳转到登录页。

二、安装 Axios？

npm install axios

三、创建 Axios 封装文件？

在这里插入图片描述

3.1 重要代码

代码有注释

// utils/request.js
import axios from 'axios';
import { Message } from 'element-ui'; // 引入 Element UI 的消息组件

// 创建 axios 实例
const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
});

// 请求拦截器
instance.interceptors.request.use(config => {
  // config.headers['Authorization'] = localStorage.getItem('token');
  return config;
}, error => {
  Message.error('请求错误: ' + error.message); // 替换为 Element UI 消息提示
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(
  response => {
    const data = response.data;
    if (data && !data.Status) { // 判断 Status 是否为 false
      Message.error(`Error: ${data.Message || 'Unknown error'}`); // 使用 Element UI 消息提示
      return data;;
    } else {
      return data; // 返回整个响应数据
    }
  },
  error => {
    if (error.response) {
      // 处理服务器返回的错误响应
      Message.error(`Error code ${error.response.status}: ${error.response.statusText}`);
    } else {
      // 处理网络问题
      Message.error('No response from server');
    }
    return Promise.reject(error);
  }
);

export default instance;

四、在 Vue 项目中如何使用封装好Axios？

再建一个api文件引入前面封装的

1、api.js

import request from '../utils/request';

export function GetBedInfo(params) {
    return request({
        url: '',
        method: 'get',
        params,
    });
}

2、组件里面使用

async buildings1() {
      try {
        const data = {
          action: "GetBedInfo",
          supplier_id: "参数",
        };
        const response = await GetBedInfo(data);
        if (response.Status) {
          console.log("this.dataList", response.Result)
          this.dataList = response.Result;
      } catch (error) {
        // console.error('Registration error:', error);
      }
    },