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;
    }
    
  • 相关阅读:
    好玩的原生js的简单拖拽
    原生js的简单倒计时
    五分钟了解node,cnpm和yarn
    计算水仙花数
    首师大附中科创教育平台 我的刷题记录(1)
    [暑假集训--数位dp]hdu3652 B-number
    [暑假集训--数位dp]hdu2089 不要62
    cf711E ZS and The Birthday Paradox
    Spoj-NETADMIN Smart Network Administrator
    cf449C Jzzhu and Apples
  • 原文地址:https://www.cnblogs.com/aahan/p/14139149.html
Copyright © 2011-2022 走看看