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,添加如下配置

javascript 复制代码
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.使用

可以自己将不同模块请求进行封装,在其他地方直接调用即可

javascript 复制代码
import service from "../index";

export const login = (params) => {
    return service({
        url: "/user/login",
        method: "post",
        data:params,
    });
};
相关推荐
2301_1472583694 分钟前
7月1日作业
java·前端·算法
汪子熙6 分钟前
Angular 应用中手动调用 subscribe 方法的时机与实践探讨
前端
csdn_aspnet14 分钟前
在 React 中使用 WebSockets 构建实时聊天应用程序
javascript·react.js·node.js
【ql君】qlexcel37 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
MiyueFE37 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子42 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端