axios在vue中的二次封装

这篇博客介绍了在企业级Vue开发中如何对axios进行封装,以提高效率和统一处理请求头、响应头。通过创建一个名为request.js的文件,设置axios实例,配置基础URL、超时时间,并在请求和响应拦截器中处理请求头和响应数据。封装后的axios能方便地添加请求头如authKey,处理请求失败和登录权限验证。此外,还提及了将此封装与Vuex结合使用的可能性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

概览

在 Vue 开发中,我们经常使用 axios 插件来进行数据的请求和提交。在企业级的 Vue 开发中,axios 插件的使用频率很高,每次请求都需要进行一些常见的操作,比如传递请求头、传递 Cookie、在请求头中传递登录信息等。如果不对 axios 进行进一步封装,就需要重复编写添加请求头和传递特殊数据的代码,这样非常浪费时间。

在日常的企业级开发中,通常会将 axios 的函数进行封装,提取为一个函数,以进行一些统一的操作。

同时,HTTP 请求可以分为请求头和响应头,在 axios 中两者都可以添加进一步的操作和拦截。我们的封装就是处理这些操作的。

axios的进一步封装

在 Vue 项目中,通常会创建一个 utils 文件夹来存放一些工具函数,比如时间格式化函数、表单校验函数等。

首先,我们创建一个名为 request.js 的文件。

当然,你也可以结合 Vuex 进行使用。

import axios from "axios";  // 引入 axios 函数

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // 跨域请求时是否传递 cookie
  timeout: 5000 // 请求超时时间
});

// 在发送请求时的请求头处理函数
service.interceptors.request.use(
  config => {
     // 在此处对 config 进行处理,即发送请求前的操作
     // 例如
     config.headers['authKey'] = token; // 在请求头中添加 authKey 属性并赋值
     return config;
  },
  error => {
    // 请求失败时的处理
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

// 在返回数据时的响应头处理函数
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code !== 200) { // 成功的 code 码一般是 200,当然 code 字段不一定存在,这里处理请求失败的操作
      // 可以使用提示框进行消息提示
      // 例如使用 alert
      alert(res.msg); // msg 为后台返回的错误信息
      // 在这里还可以进行登录权限的校验
      if (res.code === 401) {
        // 用户无权限可以进行进一步操作,比如超时退出等等
      }
      return Promise.reject(new Error(res.msg || 'Error'));
    } else {
      // 返回正常的请求数据
      return res;
    }
  },
  error => {
    // 错误处理函数
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);

// 最后将 service 进行导出
export default service;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZemanZhang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值