Title

vue vant-ui写h5:axios+Toast+Notify封装

复制代码
import axios from "axios";
import { Toast, Notify } from "vant";

/* base config */
const serve = axios.create(
    {
        baseURL: `https://cnodejs.org/api/v1`,
        timeout: 10*1000,
        headers: {
            "Cache-Control": "no-cache" /* clear storage */,
            Pragma: "no-cache",
        }
    }
)

/* if error */ 
const error = (err) => {
    Notify(
        {
            type: `danger`,
            message: err || `系统报错,请反馈管理员`
        }
    )
}

/* if loading */
let loading = Toast.loading(
    {
        duration: 0,
        forbidClick: true,
        loadingType: `spinner`,
        overlay: false,
        message: `加载中...`
    }
)

/* show loading */
const startLoading = () => {
    loading ;
}

/* close loading */ 
const endLoading = () => {
    loading.clear()
} 

/* interceptors request */ 
serve.interceptors.request.use(
    config => {
        startLoading();
        return config;
    },
    err => {
        endLoading();
        error();
        Promise.reject(err)
    }
)

/* interceptors responece */ 
serve.interceptors.response.use(
    config => {
        endLoading();
        return config;
    },
    err => {
        endLoading();
        error();
        Promise.reject(err)
    }
)

/* be imported */ 
export default serve;
复制代码

加载背景色修改:

复制代码
/* toast css */
div.van-toast {
  background-color: transparent;
  color: #2c3e50;
  background-color: rgba($color: #000000, $alpha: 0);
  div.van-toast__loading {
    .van-loading__spinner--spinner i::before {
      background-color: #2c3e50;
    } 
  }
}
复制代码

 

posted @   谈亦行  阅读(248)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
欢迎阅读『vue vant-ui写h5:axios+Toast+Notify封装』
点击右上角即可分享
微信分享提示