vue对axios进行二次封装

这篇具有很好参考价值的文章主要介绍了vue对axios进行二次封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

        在Vue中,对Axios进行二次封装可以提高代码的可重用性和可维护性。通过封装,我们可以将请求的配置、错误处理和拦截器等逻辑集中到一个地方,方便后续的修改和扩展。此外,封装Axios还可以简化代码,减少重复的请求配置,提高开发效率。因此,对Axios进行二次封装是Vue开发中一个非常实用的技巧。

1、教程步骤

1.npm或cnpm下载axios或

npm:

npm install axios -g

cnpm: 

cnpm install axios -g

2.http.js

    可以在src目录下建立http包,并在包内创建index.js,添加如下配置

import Axios from "axios";
import {MessageBox, Message} from 'element-ui'
import store from '../store/index'
import {getToken} from '@/utils/auth';

// 创建axios实例
const service = Axios.create({
    baseURL: process.env.VUE_APP_BASE_API, //URL地址   环境变量文件 .env.development
    timeout: 5000,//超时
    withCredentials: false,  //跨域时若要发生cookie,需要设置该选项
})

// 请求拦截器
service.interceptors.request.use(
    config => {
        // if (store.getters.token) {
            // 设置令牌请求头
            config.headers['authorization'] = getToken()?getToken():null;
        // }
        return config
    },
    error => {
        return Promise.reject(error)
    }
);



// 相应拦截
service.interceptors.response.use(
    // 通过自定义code 判定响应状态 也可以通过HTTP状态码判断
    response => {
        const res = response.data;
        // code 不为0 则判断为一个错误
        if (res.code !== 20000) {
            Message({
                message: res.message || "Error",
                type: 'error',
                duration: 5 * 1000
            });
            // 假设 10008 非法令牌  10012 其他客户端已经登陆
            if (res.code === 40001 || res.code === 10012) {
                // 重新登陆
                MessageBox.confirm(
                    '登陆状态异常,请重新登陆',
                    "确认登陆信息",
                    {
                        confirmButtonText: '重新登陆',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    store.dispatch('user/resetToken')
                        .then(() => {
                            location.reload()
                        })
                })
            }

            return Promise.reject(new Error(res.message || 'Error'));

        } else {
            return res;
        }
    },
    error => {
        if (error.message.includes('timeout')) {  // 如果错误信息中包含'timeout',则认为是连接超时
            Message.error("网络超时");
        }else{
            Message.error("网络超时");
        }

    }
);

export default service;

3.使用

        可以自己将不同模块请求进行封装,在其他地方直接调用即可文章来源地址https://www.toymoban.com/news/detail-812581.html

import service from "../index";

export const login = (params) => {
    return service({
        url: "/user/login",
        method: "post",
        data:params,
    });
};

到了这里,关于vue对axios进行二次封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue项目中axios的二次封装

    Vue 项目使用过程中一般会对 axios 进行二次封装, 以期在合适的时机处理一些全局的需求, 比如常见的 请求拦截器 和 响应拦截器. 接下来简单聊聊具体的操作步骤. 执行以下指令: 在 src 文件夹下创建 api 文件夹, 并创建 index.js、axios.js 和 users.js 文件. index.js 文件的作用的将当前

    2024年01月19日
    浏览(85)
  • 【vue2小知识】实现axios的二次封装

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘 本文核心 :在vue2中实现axios的二次封装 目录 一、平常axios的请求发送方式 二、axios的一次封装 三、axios的二次封装  四、总结 【前言】我们在使用axios发送请求的时候,如果是直

    2024年02月01日
    浏览(48)
  • 个人博客-SpringBoot+Vue3项目实战(6)- 二次封装Axios

    在上文中,我们封装了统一的后端数据返回结果,有了标准化的接口数据,我们就可以针对它,在前端发送接收时,进行预处理。 通常在一个企业级或者个人开源的项目中, Axios 会被二次封装。 二次封装的好处有哪些呢? 统一 url 配置 统一 api 请求 request (请求)拦截器,例

    2024年02月06日
    浏览(62)
  • Vue3和TypeScript下基于Axios的二次封装教程

    学习如何在Vue3项目中使用TypeScript和Axios进行二次封装,实现更灵活的网络请求处理。详细教程包括拦截器设置和类型扩展。

    2024年02月05日
    浏览(119)
  • 【面试题】:axios二次封装都进行了哪些配置以及如果项目里面有两个baseURL你怎么解决?

    一.axios的概念         Axios 是一个基于  promise  网络请求库,作用于node.js 和浏览器中。 它是  isomorphic  的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js  http  模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 二.axios的特点(不常问) 从浏览

    2024年02月11日
    浏览(41)
  • 【Vue项目笔记心得】postman接口测试、axios二次封装、api接口统一管理

    1、postman接口测试 下载地址:Download Postman | Get Started for Free   2、axios二次封装 (1)为什么进行二次封装axios? 请求拦截器、响应拦截器: 请求拦截器 :可以在发请求之前可以处理一些业务 响应拦截器 :当服务器数据返回以后,可以处理一些事情 安装axios: npm install ax

    2023年04月08日
    浏览(40)
  • vue 对axios进行封装

    token配置、中英文配置、对所有接口统一设置防抖、对所有post接口统一设置节流  废话少说直接上代码 request.js  api.js: 使用:     

    2024年02月09日
    浏览(36)
  • 前端049_单点登录SSO_封装 Axios 与 Mock.js

    安装 Axios ,来向后台发送接口请求 安装 Axios 发送接口请求 创建 src/utils/request.js

    2024年02月08日
    浏览(99)
  • 前端(二十七)——封装指南:Axios接口、常用功能、Vue和React中的封装技术

    😊博主:小猫娃来啦 😊文章核心: 前端封装指南:Axios接口、常用功能、Vue和React中的封装技术 在我们前端开发当中,封装是种将代码和功能组织起来以便重复使用的方式。它可以使开发人员更高效地编写、维护和管理代码。本文将探讨前端封装的定义、重要性以及在Web开

    2024年02月05日
    浏览(44)
  • 【axios】-- axios 二次封装

    如baseUrl,超出时间等 出于权限和安全考虑的密钥设置到请求头 主要针对于错误的情况做全局统一处理 把对接口的请求封装为一个方法 例子

    2024年02月09日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包