zoukankan      html  css  js  c++  java
  • 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;
    }
    
  • 相关阅读:
    git 创建一个空分支
    github page的两种类型
    hexo-theme-next
    github网页
    Linux下的CPU使用率与服务器负载的关系与区别
    mysql数据库优化日志(更)-howyue
    图片延时加载
    jQuery实现页面滚动时顶部动态显示隐藏
    TCP与UDP区别
    记一次网站服务器迁移(my)
  • 原文地址:https://www.cnblogs.com/aahan/p/14139149.html
Copyright © 2011-2022 走看看