Vue封装axios请求（超详细）

小钟不想敲代码

已于 2024-08-19 10:51:40 修改

阅读量847

点赞数 4

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2024-08-17 15:42:54 首次发布

本文链接：https://blog.csdn.net/weixin_46370595/article/details/141276775

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在这里插入图片描述

一、简介

Vue封装axios请求是指将axios库集成到Vue项目中，以便更方便地发送HTTP请求。首先，需要安装axios库，然后在Vue项目中创建一个名为request.js的文件，用于封装axios实例。在这个文件中，可以设置默认的配置，如基础URL、超时时间等。接下来，可以定义一些常用的请求方法，如GET、POST等，并将这些方法导出，以便在Vue组件中使用。这样，每次发送请求时，只需调用封装好的方法即可，无需每次都写完整的axios代码。

二、代码实现

2.1 创建Vue2项目

创建项目
```
vue create vue-request
```

选项（选择自定义）

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义

手动选择功能
选择vue的版本
选择css预处理
选择配置文件的生成方式
是否保存预设，下次直接使用？ => 不保存，输入 N

2.2 安装插件

npm install --save axios
npm install element-ui -S
// 或者
yarn add axios
yarn add element-ui

在这里插入图片描述

2.3 配置环境变量

项目路径下创建.env.development、.env.production文件

.env.development

# 页面标题
VUE_APP_TITLE = 佳运管理系统

# 开发环境配置
ENV = 'development'

# 开发环境
VUE_APP_BASE_API = '/dev-api'

.env.production

# 页面标题
VUE_APP_TITLE = 佳运管理系统

# 生产环境配置
ENV = 'production'

# 生产环境
VUE_APP_BASE_API = '/prod-api'

2.4 配置vue.config.js文件

// 导入 Vue CLI 的配置工具
const { defineConfig } = require('@vue/cli-service')

// 使用 defineConfig 函数来定义项目的配置
module.exports = defineConfig({
  // 指定是否对依赖进行转译。如果设置为 true，则所有依赖都会被 Babel 转译
  transpileDependencies: true,
  // 如果是生产环境则使用 /，否则也使用 /。如果部署到子路径下，需要修改为相应的子路径。
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  // 构建输出目录的名称，默认是 dist
  outputDir: 'dist',
  // 配置生成的静态资源存放的目录
  assetsDir: 'static',
  // 是否开启eslint保存检测，有效值：ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
  // webpack-dev-server 相关配置
  devServer: {
    // 设置开发服务器的主机地址，0.0.0.0 表示服务器监听所有 IP 地址
    host: '0.0.0.0',
    // 开发服务器使用的端口 --记得修改成自己的前端端口
    port: 9000,
    // 设置是否在启动服务器后自动打开浏览器
    open: true,
    // 配置代理规则，用于解决跨域问题
    proxy: {
      // 定义代理规则的前缀
      [process.env.VUE_APP_BASE_API]: {
        // 代理的后端目标地址
        target: `http://localhost:8080`,
        // 设置为 true 时，会改变请求的 origin 头，使得目标服务器能够正确响应
        changeOrigin: true,
        // 重写代理请求中的路径去掉前缀 VUE_APP_BASE_API
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  }
})

2.5 封装axios实例

src目录下创建utils目录并在此目录下创建request.js文件

// 导入axios库
import axios from 'axios'
// 导入Element UI的通知和消息组件
import {Notification, Message} from 'element-ui'


// 设置axios的默认请求头
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: process.env.VUE_APP_BASE_API,
    // 超时
    timeout: 10000
})

// request拦截器
service.interceptors.request.use(config => {
    // 将请求体转换为JSON字符串
    config.data = JSON.stringify(config.data);
    // 返回配置对象以便继续发送请求
    return config
}, error => {
    // 如果发生错误，打印错误信息并拒绝Promise
    console.log(error)
    return Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
        // 未设置状态码则默认成功状态
        const code = res.data.code || 200;
        // 获取错误信息
        const msg = res.data.msg
        // 二进制数据则直接返回
        if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
            return res.data
        }
        // 如果状态码为500，则显示错误消息并拒绝Promise
        if (code === 500) {
            Message({message: msg, type: 'error'})
            return Promise.reject(new Error(msg))
        } else if (code !== 200) {  // 如果状态码不是200，则显示通知并拒绝Promise
            Notification.error({title: msg})
            return Promise.reject('error')
        } else { // 如果状态码为200，则返回响应数据
            return res.data
        }
    },
    error => {
        // 错误处理
        console.log('err' + error)
        let {message} = error;

        // 根据不同的错误类型，给出友好的提示信息
        if (message == "Network Error") {
            message = "后端接口连接异常";
        } else if (message.includes("timeout")) {
            message = "系统接口请求超时";
        } else if (message.includes("Request failed with status code")) {
            message = "系统接口" + message.substr(message.length - 3) + "异常";
        }
        Message({message: message, type: 'error', duration: 5 * 1000})
        return Promise.reject(error)
    }
)

// 导出配置好的axios实例
export default service

2.6 api解耦

src目录下创建api目录并在此目录下创建接口js文件

import request from '@/utils/request'

// 查询部门列表
export function listDept(query) {
  return request({
    url: '/system/dept/list',
    method: 'get',
    params: query
  })
}

// 查询部门详细
export function getDept(deptId) {
  return request({
    url: '/system/dept/' + deptId,
    method: 'get'
  })
}

// 新增部门
export function addDept(data) {
  return request({
    url: '/system/dept',
    method: 'post',
    data: data
  })
}

// 修改部门
export function updateDept(data) {
  return request({
    url: '/system/dept',
    method: 'put',
    data: data
  })
}

// 删除部门
export function delDept(deptId) {
  return request({
    url: '/system/dept/' + deptId,
    method: 'delete'
  })
}

2.7 使用api

// 引入js文件
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";

// 使用
methods: {
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      listDept(this.queryParams).then(response => {
        this.deptList = this.handleTree(response.data, "deptId");
        this.loading = false;
      });
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      if (row != undefined) {
        this.form.parentId = row.deptId;
      }
      this.open = true;
      this.title = "添加部门";
      listDept().then(response => {
        this.deptOptions = this.handleTree(response.data, "deptId");
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      getDept(row.deptId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改部门";
        listDeptExcludeChild(row.deptId).then(response => {
          this.deptOptions = this.handleTree(response.data, "deptId");
          if (this.deptOptions.length == 0) {
            const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] };
            this.deptOptions.push(noResultsOptions);
          }
        });
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.deptId != undefined) {
            updateDept(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDept(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
        return delDept(row.deptId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    }
  }