vue的axios的简单封装

最新推荐文章于 2025-06-05 09:20:49 发布

吴小花的博客

最新推荐文章于 2025-06-05 09:20:49 发布

阅读量735

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue.js 项目实战经验

本文链接：https://blog.csdn.net/weixin_39089928/article/details/114929132

Vue.js 项目实战经验专栏收录该内容

52 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue项目中如何对axios进行简单的封装，包括请求拦截、响应拦截和错误处理，并展示了get和post请求的使用，特别是在微信环境中自定义分享链接的配置方法。同时提供了参考资料链接，帮助理解axios的使用。

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

1.前言

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

2.安装

$ npm install axios

3.axios封装

封装目的：实现请求拦截、相应拦截、错误统一处理

在src/assets/js 目录下新建Ajax.js文件


import axios from 'axios'; // 引入axios

import {
    Toast
} from 'vant';

// 将所有 Toast 的展示时长设置为 1000 毫秒
Toast.setDefaultOptions({
    duration: 1000
});

// 将所有 loading Toast 设置为背景不可点击
Toast.setDefaultOptions('loading', {
    forbidClick: true
});

/** 
 * 提示函数,禁止点击蒙层、显示一秒后关闭
 */
const tip = msg => {
    Toast({
        message: msg,
        duration: 1000,
        forbidClick: true
    });
}
/***
 * pro,test,dev环境的接口前缀切换
 * 调接口时Loading,成功或失败取消Loading
 * 统一的成功回调
 * 统一的失败回调错误处理
 * **/
const global = {
    env: "pro"
}
let baseUrl = ""
switch (g

了解本专栏