简单封装axios

目录

一、代码解读

import axios from 'axios';

创建一个名为 instance 的 Axios 实例,配置默认的请求地址和超时时间

javascript 复制代码
const instance = axios.create({
    baseURL: 'http://localhost:8085',
    timeout: 5000,
});

请求拦截器,用于在请求发送前进行处理,比如在请求头中添加 token ,在请求发送之前,如果有需要,可以在请求头中加入认证信息

javascript 复制代码
instance.interceptors.request.use(
    (config) => {
        // config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

响应拦截器,用于统一处理后端返回的错误信息

javascript 复制代码
instance.interceptors.response.use(
    (response) => {
        // 对后端返回的数据进行统一处理
        const data = response.data;
        // 如果返回的状态码不是 200,则输出错误信息到控制台
        if (data.code !== 200) {
            console.error(`Error: ${data.message}`);
        }
        return data;
    },
    (error) => {
        // 处理响应错误,输出错误信息到控制台
        console.error('Response Error:', error);
        return Promise.reject(error);
    }
);

封装 GET 请求方法,支持传入请求地址和参数

javascript 复制代码
function get(url, params = {}) {
    return instance.get(url, { params });
}

封装 POST 请求方法,支持传入请求地址和数据

javascript 复制代码
function post(url, data = {}) {
    return instance.post(url, data);
}

封装上传文件的方法,支持传入请求地址和文件

javascript 复制代码
function uploadFile(url, file) {
    // 创建一个 FormData 对象,用于上传文件
    const formData = new FormData();
    formData.append('file', file);
    // 使用 POST 方法上传文件,并设置请求头的 Content-Type 为 multipart/form-data
    return instance.post(url, formData, {
        headers: {
            'Content-Type': 'multipart/form-data',
        },
    });
}

导出封装好的 GET、POST 和上传文件的方法

javascript 复制代码
export { get, post, uploadFile };

二、整体代码

javascript 复制代码
import axios from 'axios';

const instance = axios.create({
    baseURL: 'http://localhost:8085',
    timeout: 5000,
});

instance.interceptors.request.use(
    (config) => {
        // config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

instance.interceptors.response.use(
    (response) => {
        const data = response.data;
        if (data.code !== 200) {
            console.error(`Error: ${data.message}`);
        }
        return data;
    },
    (error) => {
        console.error('Response Error:', error);
        return Promise.reject(error);
    }
);

function get(url, params = {}) {
    return instance.get(url, { params });
}

function post(url, data = {}) {
    return instance.post(url, data);
}

function uploadFile(url, file) {
    const formData = new FormData();
    formData.append('file', file);
    return instance.post(url, formData, {
        headers: {
            'Content-Type': 'multipart/form-data',
        },
    });
}

export { get, post, uploadFile };
相关推荐
无限大.4 小时前
前端知识速记:节流与防抖
前端
十八朵郁金香5 小时前
【VUE案例练习】前端vue2+element-ui,后端nodo+express实现‘‘文件上传/删除‘‘功能
前端·javascript·vue.js
学问小小谢5 小时前
第26节课:内容安全策略(CSP)—构建安全网页的防御盾
运维·服务器·前端·网络·学习·安全
LCG元5 小时前
Vue.js组件开发-实现全屏图片文字缩放切换特效
前端·javascript·vue.js
还是鼠鼠6 小时前
图书管理系统 Axios 源码__新增图书
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
customer087 小时前
【开源免费】基于SpringBoot+Vue.JS体育馆管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·开源
Miketutu7 小时前
Spring MVC消息转换器
java·spring
乔冠宇7 小时前
Java手写简单Merkle树
java·区块链·merkle树
LUCIAZZZ8 小时前
简单的SQL语句的快速复习
java·数据库·sql
komo莫莫da9 小时前
寒假刷题Day19
java·开发语言