axios封装+Toast提示

  • axios请求封装
  • 请求提示用vant的Toast:应对同时发送多个请求,这里使用了一个栈,队列也可以(仔细想想,好像队列更符合逻辑)
  • post请求数据用qs转换处理
import axios from 'axios'
import qs from 'qs';
import router from '../../router'
import { Toast } from 'vant';

const path = '';

// axios对象
const instance = axios.create({
  baseURL: '',
  timeout: 10000
})

let loadingToast = [];

// 请求拦截
instance.interceptors.request.use(
  function(config) {
    console.group('请求拦截');
    console.log(config);
    console.groupEnd();
    const loadingToastItem = Toast.loading({
      duration: 0,
      overlay: true
    });
    loadingToast.push(loadingToastItem);
    return config;
  },
  function(err) {
    return Promise.reject(err);
  }
);

// 响应拦截
instance.interceptors.response.use(
  function(response) {
    console.group('响应拦截');
    console.log(response);
    console.groupEnd();
    if (loadingToast.length > 0) {
      loadingToast.pop().clear();
    }
    return response;
  },
  function(err) {
    // console.log(err)
    Toast('网络错误!');
    if (loadingToast.length > 0) {
      loadingToast.pop().clear();
    }
    return Promise.reject(err);
  }
);

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

// post
export function post(url, data) {
  return instance.post(url, qs.stringify(data));
}

export function getPath() {
  return path;
}
posted @   涛啊声依旧  阅读(781)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
点击右上角即可分享
微信分享提示